First Line of Tree Node Text being forced to second line

[Aaron]

I am using a radtreeview, and in some cases where there are no spaces in the node values, the text is being forced to wrap to the second line while nothing is appearing on the first line.

So if I have a value like Store\Employee\Customer, it will have the first line be blank and move the value to the second line similar to below

-
 Store\Employee\Customer

where it should look like
-Store\Employee\Customer

I have used a combination of white-space, overflow, and display styles but nothing seems to help.

Any help would be appreciated.

Thanks

Aaron

[Atanas Korchev]

Hello Aaron,

Could you please give us more details?

• Does this appear always?
• Is the problem specific to a particular browser or version?
• Could you paste here the declaration of the treeview so we can test locally?

I tried the following configuration which didn't suffer from that problem:

        <telerik:RadTreeView runat="server" ID="RadTreeView1">
            <Nodes>
                <telerik:RadTreeNode Text="Store\Employee\Customer">
                    <Nodes>
                        <telerik:RadTreeNode Text="Child node"></telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
            </Nodes>
        </telerik:RadTreeView>
Regards,

Albert,

the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Aaron]

Hi, thanks for looking at my post, here is some added information.  I have looked at the problem in both chrome and IE and the problem is in both. 

The treeview that is used is basically a default treeview that is loaded with a dataset.  The decleration is below

<

 

telerik:RadTreeView runat="server" ID="radTreeViewCategoryPicker" OnNodeClick="radTreeViewCategoryPicker_SelectedNodeChanged" OnNodeDataBound="radTreeViewCategoryPicker_NodeDataBound" style="white-space:normal">

 

</

 

telerik:RadTreeView>


When loading the page in the code behind, there are no property's or classes set other than the normal data items.  I have attached the source that is rendered to the page for one node and it's child nodes in the tree, hopefully this will kind of help explain what is going on.

The parent node in the branch has the text PQS with child nodes of Core, Custom, Demographic, Display/Instructions, Screener, and Verbatim.  All of the nodes have their text appear on the proper line except Display/Instructions, whose text appears on the second line of the node with nothing on the first line.  If I manipulate the data to put a space between Display and Instructions it will wrap correctly with Display being on the first line and Instructions on the second.  So the problem appears to happen when the text is long enough to wrap, but really shouldn't because there are no spaces in the text.   I am not sure how to resolve this situation.

<li class="rtLI"><div class="rtMid">
         <span class="rtSp"></span><span class="rtMinus"></span><span class="rtIn">PQS</span>
        </div><ul class="rtUL">
         <li class="rtLI"><div class="rtTop">
          <span class="rtSp"></span><span class="rtIn">Core</span>
         </div></li><li class="rtLI"><div class="rtMid">
          <span class="rtSp"></span><span class="rtIn">Custom</span>
         </div></li><li class="rtLI"><div class="rtMid">
          <span class="rtSp"></span><span class="rtIn">Demographic</span>
         </div></li><li class="rtLI"><div class="rtMid">
          <span class="rtSp"></span><span class="rtIn">Display/Instructions</span>
         </div></li><li class="rtLI"><div class="rtMid">
          <span class="rtSp"></span><span class="rtIn">Screener</span>
         </div></li><li class="rtLI rtLast"><div class="rtBot">
          <span class="rtSp"></span><span class="rtIn">Verbatims</span>
         </div></li>
        </ul></li>

 I hope this kind of helps describe what is going on.  Thanks again for your help.

Aaron

 

[Atanas Korchev]

Hello Aaron,

Could it be some global CSS overriding the treeview? Does the problem appear in a new web site?

Regards,

Albert,

the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Aaron]

Hey Albert,

I built a new project with just one page and I still am getting the problem.  I have pasted the code of the form that I used in the only page of the project.  When I run it, I get the problem I have explained below. I have no CSS in this new project and have done nothing in the codebehind, I am still unable to figure out how to get the text to always start on the first line of the node.

Thanks again for your help.

Aaron

 

<form id="form1" runat="server">

 

 

<div>

 

 

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="True"

 

 

AsyncPostBackTimeout="300"

 

 

EnablePageMethods="True" ScriptMode="Release">

 

 

<Scripts>

 

 

 

 

<asp:ScriptReference Path="~/JavaScript/help.js" />

 

 

 

 

 

 

 

</Scripts>

 

 

</asp:ScriptManager>

 

 

<table>

 

 

<tr>

 

 

<td style="width: 200px" align="left" valign="top">

 

 

<asp:Panel ID="PanelCategoryPicker" runat="server" Direction="LeftToRight" GroupingText="Categories"

 

 

Height="300px" HorizontalAlign="Left"

 

 

Width="100%" Wrap="False">

 

 

<asp:Panel ID="Panel1" runat="server" BorderStyle="None" Height="275px" ScrollBars="Auto"

 

 

Width="95%" Wrap="False">

 

 

<telerik:RadTreeView runat="server" ID="RadTreeView1" style="white-space:normal" >

 

 

<Nodes>

 

 

<telerik:RadTreeNode Text="Store\Employee\Customers\testing">

 

 

<Nodes >

 

 

<telerik:RadTreeNode Text="ChildNodetestingthelengthofachildnode">

 

 

 

</telerik:RadTreeNode>

 

 

</Nodes>

 

 

</telerik:RadTreeNode>

 

 

</Nodes>

 

 

</telerik:RadTreeView>

 

 

</asp:Panel>

 

 

</asp:Panel>

 

 

</td>

 

 

</tr>

 

 

</table>

 

 

 

</div>

 

 

</form>

 

[Atanas Korchev]

Hello Aaron,

Thank you for providing a sample which reproduces the problem.

The width of the TD is 200px which is not enough and the treeview is squished. A possible solution is to add the following CSS to your page:

    <style type="text/css">
        .RadTreeView .rtTop,
        .RadTreeView .rtMid,
        .RadTreeView .rtBot
        {
            white-space:nowrap;
        }
    </style>

Regards,

Albert,

the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Aaron]

Thanks Albert,

I shrunk the treeview to make it easier to show the problem.  The actual treeview I am using has a width of just less than 1/3 of my screen and the problem starts when the tree is expanded to the 3rd and 4th level of the tree.  I didn't want to have to create the whole thing manually.

The nowrap will not accomplish what I want because I do still want the texts to wrap, i just want 'continuous' strings to start on the first line.   Maybe this is something that has no solution right now.

Thanks again

Aaron