Solved

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

Posted on 2009-07-06
5
767 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

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
hbo knew my windows software 4 63
SSIS Start 2 21
Reactjs with .NET 3 37
I need help changing the default value for an @HTML.LabelFor control 4 21
Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
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…
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…

830 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