Improve company productivity with a Business Account.Sign Up

x
?
Solved

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

Posted on 2009-07-06
5
Medium Priority
?
787 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
4 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

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

The Super Bowl is just days away. Millions of advertising dollars will be spent in just a few hours to drive people to websites around the globe. Optimizing your site in anticipation of a big event like this (and the traffic surges that follow) will…
There is a wide range of advantages associated with the use of ASP.NET. This is why this programming framework is used to create excellent enterprise-class websites, technologies, and web applications.
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…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

585 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