Solved

CSS wont work on a treeview control after disabling "EnableCliendScript" option

Posted on 2009-07-06
5
761 Views
Last Modified: 2013-11-07
Hi All
I have a treeview control that shows the sites menu. I have added a css file that gave it a hover effect for each node. Then i had to disable the  "EnableCliendScript" property because it was messing up the collapse/Expand feature of the treeview (When combined with the ajax updatepanel). After disabling that property i dont get the hover effect anymore, everything else works fine but not the hover effect.

What can i do to fix it?
0
Comment
Question by:urir10
  • 2
  • 2
5 Comments
 
LVL 17

Expert Comment

by:selvol
ID: 24790957
Could you share the CSS code or the page with us? Either in the form of the URL or attach the css and HTML code?
Selvol
0
 
LVL 7

Author Comment

by:urir10
ID: 24794361
Yes sorry forgot to do it in the first place. Here is what ive got:


This is the effect i want when the nodes are hovered over works fine when i turn the  "EnableCliendScript" property to True, but then the collapse/expand does not work properly because its inside the update panel. When the  "EnableCliendScript" property is false everything else works but not the hover over effect.
  <!-- THIS IS THE TREEVIEW IN THE MASTER PAGE -->
 

 <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">

                                    <ContentTemplate>

                                        <asp:TreeView CssClass="TreeMenu" ID="menu_user" runat="server" DataSourceID="SiteMapDataSource1"

                                            MaxDataBindDepth="100" NodeIndent="0" BorderWidth="0px" CollapseImageUrl="~/Images/minus.gif"

                                            NoExpandImageUrl="~/images/blank2.gif" OnTreeNodeDataBound="menu_user_TreeNodeDataBound"

                                            ExpandImageUrl="~/Images/plus.gif" OnDataBound="menu_user_DataBound" OnTreeNodeCollapsed="menu_user_TreeNodeCollapsed"

                                            OnTreeNodeExpanded="menu_user_TreeNodeExpanded" EnableClientScript="False">

                                            <HoverNodeStyle Font-Underline="False" ForeColor="WhiteSmoke" Width="100%" CssClass="LeafNodeSelected" />

                                            <SelectedNodeStyle Font-Underline="False" ForeColor="White" HorizontalPadding="0px"

                                                VerticalPadding="0px" Width="100%" CssClass="LeafNodeSelected" />

                                            <RootNodeStyle BackColor="#2D5C3D" BorderStyle="Solid" BorderWidth="0px" ForeColor="White"

                                                Width="100%" Font-Bold="True" CssClass="RootNode" />

                                            <NodeStyle Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" HorizontalPadding="0px"

                                                NodeSpacing="0px" CssClass="Node" VerticalPadding="0px" Width="100%" ChildNodesPadding="0px" />

                                            <LeafNodeStyle BackColor="#8BB093" BorderStyle="Solid" BorderWidth="0px" ChildNodesPadding="0px"

                                                Font-Bold="True" ForeColor="#2D5C3D" NodeSpacing="0.01em" VerticalPadding="0px"

                                                Width="100%" Font-Overline="False" HorizontalPadding="2px" CssClass="LeafNode" />

                                            <ParentNodeStyle BackColor="#2D5C3D" BorderStyle="Solid" BorderWidth="0px" ForeColor="White"

                                                Width="100%" Font-Bold="True" CssClass="LeafNodeParent" NodeSpacing="0px" VerticalPadding="0px" />

                                        </asp:TreeView>

                                    </ContentTemplate>

                                    <Triggers>

                                        <asp:AsyncPostBackTrigger ControlID="menu_user" EventName="TreeNodeCollapsed" />

                                        <asp:AsyncPostBackTrigger ControlID="menu_user" EventName="TreeNodeExpanded" />

                                    </Triggers>

                                </asp:UpdatePanel>
 
 
 

  <!-- THIS IS THE CSS -->
 
 

tr.LeafNode

{

    padding: -5px;

    margin: -5px;
 

}

table.LeafNode

{

    padding:-5px;

    margin: -5px;

  

}

      

      

th.LeafNode

{

    padding:-5px;

    margin: -5px;

 

}  

td.LeafNodeSelected

{
 

border-bottom	: solid 1px #c8ddca ;

border-top	: solid 1px #769c80 ;

border-left: solid 1px #769c80 ;

height:0;
 

}

td.RootNode

{
 

border-bottom	: solid 1px #769c80 ;

border-top	: solid 1px #c8ddca ;

border-right:solid 1px #769c80 ;
 

}
 
 

.navigation{

border: 0px solid black;

border-bottom-width: 0;

width: 200px;

margin-top:-20px;

height:100%; 

}

.HomeNode {

display: none;

border-bottom	: solid 1px #769c80 ;

border-top	: solid 1px #c8ddca ;

border-right:solid 1px #769c80 ;

height:0;

margin-bottom:0;

margin-top:3px;
 

font-family: verdana; 

padding-left:1.5px;

font-size: 11px; 

text-decoration:none; 

font-weight: bold;

color:White;

margin-left:1px;

}

.HomeNode:hover {

display: none;

border-bottom	: solid 1px #c8ddca ;

border-top	: solid 1px #769c80 ;

border-left: solid 1px #769c80 ;

height:0;

text-indent:20;
 

font-family: verdana; 

padding-left:1.5px;

font-size: 11px; 

text-decoration:none; 

font-weight: bold;

color:White;

}

.TreeMenu

{

	margin-top: 0px;

	margin-bottom:-1px;

}

Open in new window

0
 
LVL 17

Accepted Solution

by:
selvol earned 500 total points
ID: 24794534
My server is having some problems so asp* is a bit hard to test.
 
I assume you validates the CSS?
Olny reason I mention that is there is an error on the HOVER.
line 32 .HomeNode:hover Value
Error : text-indent only 0 can be a length.
You must put a unit after your number : 20  
 
I'll try to get back soon.
I have to deal woth some trouble I just Discovered..

Validated CSS
 

.navigation { 

border : 0 solid black; 

border-bottom-width : 0; 

width : 200px; 

margin-top : -20px; 

height : 100%; 

} 

.HomeNode { 

display : none; 

border-bottom : 1px solid #769c80; 

border-top : 1px solid #c8ddca; 

border-right : 1px solid #769c80; 

height : 0; 

margin-bottom : 0; 

margin-top : 3px; 

font-family : verdana; 

padding-left : 1.5px; 

font-size : 11px; 

text-decoration : none; 

font-weight : bold; 

color : white; 

margin-left : 1px; 

} 

.HomeNode:hover { 

display : none; 

border-bottom : 1px solid #c8ddca; 

border-top : 1px solid #769c80; 

border-left : 1px solid #769c80; 

height : 0; 

font-family : verdana; 

padding-left : 1.5px; 

font-size : 11px; 

text-decoration : none; 

font-weight : bold; 

color : white; 

} 

.TreeMenu { 

margin-top : 0; 

margin-bottom : -1px; 

} 

Open in new window

0
 
LVL 7

Author Comment

by:urir10
ID: 24794610
thanks for the reply selvol.
I actually took that whole tag out since i wasnt using it anymore. so it was not that.
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
This article shows how to deploy dynamic backgrounds to computers depending on the aspect ratio of display
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to count occurrences of each item in an array.

929 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now