Solved

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

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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Read about why website design really matters in today's demanding market.
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
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.

746 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

9 Experts available now in Live!

Get 1:1 Help Now