urir10
asked on
CSS wont work on a treeview control after disabling "EnableCliendScript" option
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?
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?
ASKER
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 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;
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
thanks for the reply selvol.
I actually took that whole tag out since i wasnt using it anymore. so it was not that.
I actually took that whole tag out since i wasnt using it anymore. so it was not that.
Selvol