TreeView and .css files

[Guest]

I have the following code in an .net 2.0 project:

<aspanel Runat="server" id="pnlNavigation" CssClass="pnlNavigation"
Width="165px">
<asp:TreeView ID="TreeView1" runat="server"
DataSourceID="SiteMapDataSource1" CssClass="nav" BorderStyle="None"
CollapseImageToolTip="" ExpandImageToolTip="" ShowExpandCollapse="False">
<LevelStyles>
<asp:TreeNodeStyle CssClass="homenav" Font-Underline="False"
/>
<asp:TreeNodeStyle CssClass="mainnav" Font-Underline="False"
Font-Size="11pt" />
<asp:TreeNodeStyle CssClass="mainnavsub"
Font-Underline="False" Font-Size="10pt" />
</LevelStyles>
<LeafNodeStyle CssClass="mainnav" BorderStyle="None" />
<NodeStyle VerticalPadding="2px" HorizontalPadding="5px" />
</asp:TreeView>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
</aspanel>

The problem is that when displayed, the font sizes are not coming through as
set in the properties.

Any ideas?

Thanks.

 

[Steven Cheng[MSFT]]

Hi Acsla,

Welcome to the ASPNET newsgroup.

As for the TreeView node style problem, based on my local tests, the
TreeNode style properties should work as expected. I'm thinking whether it
is possibly that the css style sheet's font setting override the
servercontrol's font setting. Have you tried setting the font properties in
TreeView without apply css style? Also, for root node and leafNodes, we
should use

<RootNodeStyle .........../> and <LeafNodeStyle ........ /> specific
setting.

For other levels node, just can use the LevelStyles collection. Here is my
test page's Treeview template:

(I haven't include the css sheet file in the page)
=======================

<asp:TreeView ID="TreeView1" runat="server"
DataSourceID="SiteMapDataSource1" CssClass="nav" BorderStyle="None"
CollapseImageToolTip="" ExpandImageToolTip="" ShowExpandCollapse="False">
<LevelStyles>
<asp:TreeNodeStyle CssClass="homenav"
Font-Underline="False" Font-Size="5" ForeColor="black" />
<asp:TreeNodeStyle CssClass="mainnav"
Font-Underline="False" Font-Size="14pt" ForeColor="green" />
<asp:TreeNodeStyle CssClass="mainnavsub"
Font-Underline="False" Font-Size="18pt" ForeColor="yellow" />
</LevelStyles>

<LeafNodeStyle BorderStyle="None" Font-Size="24"
ForeColor="pink" />
<NodeStyle VerticalPadding="2px" HorizontalPadding="5px"
ForeColor="blue" />
</asp:TreeView>
====================

Regards,

Steven Cheng
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)


--------------------
| Thread-Topic: TreeView and .css files
| thread-index: AcYjfUuMj8vSjTzfSvSCSLjdiiCBWg==
| X-WBNR-Posting-Host: 216.117.194.109
| From: "=?Utf-8?B?R2VyaGFyZA==?=" <[email protected]>
| Subject: TreeView and .css files
| Date: Fri, 27 Jan 2006 12:07:27 -0800
| Lines: 27
| Message-ID: <[email protected]>
| MIME-Version: 1.0
| Content-Type: text/plain;
| charset="Utf-8"
| Content-Transfer-Encoding: 7bit
| X-Newsreader: Microsoft CDO for Windows 2000
| Content-Class: urn:content-classes:message
| Importance: normal
| Priority: normal
| X-MimeOLE: Produced By Microsoft MimeOLE V6.00.3790.0
| Newsgroups: microsoft.public.dotnet.general
| NNTP-Posting-Host: TK2MSFTNGXA03.phx.gbl 10.40.2.250
| Path: TK2MSFTNGXA02.phx.gbl!TK2MSFTNGXA01.phx.gbl!TK2MSFTNGXA03.phx.gbl
| Xref: TK2MSFTNGXA02.phx.gbl microsoft.public.dotnet.general:187406
| X-Tomcat-NG: microsoft.public.dotnet.general
|
| I have the following code in an .net 2.0 project:
|
| <aspanel Runat="server" id="pnlNavigation" CssClass="pnlNavigation"
| Width="165px">
| <asp:TreeView ID="TreeView1" runat="server"
| DataSourceID="SiteMapDataSource1" CssClass="nav" BorderStyle="None"
| CollapseImageToolTip="" ExpandImageToolTip="" ShowExpandCollapse="False">
| <LevelStyles>
| <asp:TreeNodeStyle CssClass="homenav"
Font-Underline="False"
| />
| <asp:TreeNodeStyle CssClass="mainnav"
Font-Underline="False"
| Font-Size="11pt" />
| <asp:TreeNodeStyle CssClass="mainnavsub"
| Font-Underline="False" Font-Size="10pt" />
| </LevelStyles>
| <LeafNodeStyle CssClass="mainnav" BorderStyle="None" />
| <NodeStyle VerticalPadding="2px" HorizontalPadding="5px" />
| </asp:TreeView>
| <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
| </aspanel>
|
| The problem is that when displayed, the font sizes are not coming through
as
| set in the properties.
|
| Any ideas?
|
| Thanks.
|

 

[Guest]

Thanks.

The question then becomes, why would something else in the .css file
override this, as this is being assigned specifically to a control? My
understanding of .css is that specific class assigned to an object takes
presidence. And if a control is assigned a specific attribute, the .css file
shouldn't override.

When I do a View Source on one of the lines I get the following:

<td class="ctl00_Navigation1_TreeView1_1 mainnavsub
ctl00_Navigation1_TreeView1_9 mainnav ctl00_Navigation1_TreeView1_3"
style="white-space:nowrap;"><a class="ctl00_Navigation1_TreeView1_0
mainnavsub ctl00_Navigation1_TreeView1_8 mainnav
ctl00_Navigation1_TreeView1_2" href="/HealthProPartners/Clinical.aspx"
title="Clinical" id="ctl00_Navigation1_TreeView1n6"
style="border-style:none;font-size:1em;">Clinical</a></td>

Note that the stye shows font-size:1em (shouldn't it be "10pt" which I
set?). If I save the ViewSource file, the edit the font-size to what
expected, it shows up correctly. Seems to me there is a bug in generating
the html where the font size should be what is entered in TreeNodeStyle.

The other question is what is class ctl00_Navigation1_TreeView1_1? That
shows up in the class for the object before the class I specifically
assigned. Would that be overriding what I am doing?

Am I missing something?

Thanks.

 

[Steven Cheng[MSFT]]

Hi Acsla,

Thanks for your response.
As for css style, there could have many text size related setting which can
affect the text in page or sub html elements. e.g. the text style for whole
page or for table's content may also affect the TreeView. However, I think
if we explicitly set the font size through the TreeView's certain
XXXNodeStyle, that should be able to override the css attributes.

In addition, as for the "ctl00_Navigation1_TreeView1_0_xxx" like css class
name, they're auto generated by ASP.NET server control's code which point
to some buildin styles which may contains some attributes for other html
element style definiation. I don't think this will conflict with our
customized style setting. To test this, if the TreeView xxxNodeStyle works
well when no css style is linked, we can try removing the css style setting
in linked css file step by step to see what setting in css file broke the
server control's style setting.

Regards,

Steven Cheng
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)