Solved

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

Posted on 2009-07-06
5
774 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 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 Transaction Monitoring and who needs it?

Synthetic Transaction Monitoring that you need for the day to day, which ensures your business website keeps running optimally, and that there is no downtime to impact your customer experience.

Question has a verified solution.

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

When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
This video teaches users how to migrate an existing Wordpress website to a new domain.
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.

717 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