?
Solved

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

Posted on 2009-07-06
5
Medium Priority
?
777 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 2000 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

Visualize your virtual and backup environments

Create well-organized and polished visualizations of your virtual and backup environments when planning VMware vSphere, Microsoft Hyper-V or Veeam deployments. It helps you to gain better visibility and valuable business insights.

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Suggested Courses

801 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