Text wrap and indentation

[Soonam m lal]

Hi Team,

I would like to know if the below mentioned format can be achieved using the treeview.

-Section1
     -Section1.1
        -This section is long and need
           text wrapping with the indentation
           proper.
        -this is a small section   
     +Section1.2
     +Section1.3
     +Section1.4
+Section2
+Section3
+Section4

Do let me know if my question is not understandable.

Thanks,
Soonam

[Shinu]

Hello Soonam,

Try applying style="white-space:normal" for treeview in order to wrap the treenode text. Checkout the following link for more information.
Wrap TreeNode's text




-Shinu.

[Soonam m lal]

Hi,

Thank you Shinu for the response.
I have already applied that style, the text wrapping is taking place but the indentation of the wrapped text is not proper. Please see below samples.

Present:
-------------------------------------------------------------
-Section1
     -Section1.1
        -This section is long and need
text wrapping with the indentation
proper.
        -this is a small section   
     +Section1.2
     +Section1.3
     +Section1.4
+Section2
+Section3
+Section4

Required:
-------------------------------------------------------------
-Section1
     -Section1.1
        -This section is long and need
           text wrapping with the indentation
           proper.
        -this is a small section   
     +Section1.2
     +Section1.3
     +Section1.4
+Section2
+Section3
+Section4

Thanks,
Soonam

[Yana]

Hello Soonam m lal,

Please add the following css styles to your page:

div.RadTreeView .rtIn {
    display:inline-block;
}

Regards,
Yana
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.

[Soonam m lal]

Hi Yana,

The indentation is now working.
Thanks a lot for the immediate resolution.

-Soonam

[Paul]

Hi,  I found this post last night as I am suffering the same problem,  I just wonderd how do you get this to layout correctly when the tree has checkboxes?

My text is appearing under the checkbox if it needs to wrap.  If it doesn't wrap, the text is displayed to the right of the checkbox as expected.

Thanks,

[Yana]

Hello Paul,

You should remove "display: inline-block" style for the "rtIn" elements, in this way the text will be aligned next to the checkboxes, but it will not be indented.

Greetings,
Yana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Paul]

Sorry for the slow reply.  I removed the style as you suggest but it makes no difference, the whole wrapped text is still under the checkbox.  If I remove the style from this markup, the text is not wrapped at all, so I have to scroll.

    <telerik:RadTreeView ID="RadTreeViewAnswers" runat="server" CheckBoxes="True" ShowLineImages="False"
        Width="800px" Style="white-space: normal" Visible="true">

Any other ideas?

Thanks,
Paul

[Yana]

Hi Paul,

The treeview looks as expected at our side. Could you please send us a live url or a simple page demonstrating the issue? Thanks

Best wishes,
Yana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Paul]

Hi,

An image of the problem is here:

Wrap Problem

Thanks,
Paul

[Yana]

Hello Paul,

Thank you for sending the image.

Have you set width in percentage for the nodes?  I cannot reproduce this at our side, that's why I asked for a live url  where I could inspect the used css styles.

Greetings,
Yana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Paul]

Sorry they won't let me give you a login for the site as it is fully secure and subscription based.

The radtreeview control has its width set to 800px.

[Yana]

Hi Paul,

You can open a support ticket and send the login details there, they will be seen only by us. The other option is to try to isolate the issue in a simple page and send it to us again in a support ticket.

All the best,
Yana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Jon Shipman]

I'm using an image with my nodes, as can be seen here:
http://humanresearchroadmap.nasa.gov/explore/ I'm also using white-space:normal to allow word-wrapping, but I'd like for the text to be aligned on the left rather than the second and subsequent lines aligning under the image.

I tried:

div.RadTreeView .rtIn {
    display:inline-block;
}

but this resulted in the attached screenshot.

Any ideas on how to get the word-wrap to align left when there's an image?

Thanks!

[Yana]

Hello Jon,

I wasn't able to reproduce the issue in IE7 or IE8. I've attached two screenshots to show that the image and the text are aligned properly.

Regards,
Yana
the Telerik team

[Jon Shipman]

Thanks.  Sometimes its hard to describe what I am wanting.  I was actually wanting the word-wrap to align under the start of the text rather than under the image.

I attached two screenshots.  In the first one, the top section shows the current alignment and on the bottom section I used a graphics program to show how I'd like the alignment to be.

The second screenshot is from a different page where the user can edit the content using drag and drop.  The top section shows the current alignment along with a hover and a selected item.  The bottom section shows what I'd like to have.  I prefer that alignment and I also like how the hover and selected items look.  I got this far using the CSS below.  But there are still issues with vertical spacing on expanded nodes, and the position: relative and top: -20px is a bit of a kludge...

If you have a suggestion, great!  If not, that's fine and I'll try not to be so picky!  :-)

div.RadTreeView .rtImg
{
    display:table-cell;
    vertical-align:top;
    position: relative;
    top: -20px;
}

div.RadTreeView .rtIn
{
    display:table-cell;
    vertical-align:top;
    position: relative;
    top: -26px;
}

div.RadTreeView .rtLI
{
    margin-bottom: -26px;
}

[Yana]

Hi Jon,

I'm sorry for misunderstanding.

Currently this alignment of the text cannot be easily changed, we're sorry for the inconvenience.

All the best,
Yana
the Telerik team

[Jon Shipman]

Hey Yana,

I finally revisited this topic and found a solution that is working well so far.  I added the following styles:

.rtIn
{
    display: inline-table;
    width: 500px;
    position: relative;
    top: -2px;
    *top: 2px;
}

.rtImg
{
    vertical-align: top !important;
    position: relative;
    top: 5px;
}

Attached is the before and after picture.  It tested it in IE8, Chrome, and Firefox and it looks good.  I also tested it in IE7. In IE7 it looks exactly like the before picture!  Which is fine with me!  Better than looking a mess!  The only thing I needed to adjust for IE7 is a small alignment issue, thus the *top: 2px; rule...

Thanks.

[Jon]

I am not sure if anyone else has had the same issues that I have had. I have 5 img button to the LHS of my Text but I wanted to have the node text wrap to a second line, pretty much the same as Jon but I was happy to have my drag "image" include the img buttons whereas Jon wanted his excluded from the text item. Jon's css gave me a hint in the right direction but I was unable to get this to work in css. Using Chrome and Firebug debugger I could see that my css was kicking in but the styling just refused to work. However, by using inline styling in the <span> markup I was able to get the perfect result for my requirements.

Each time I drag a treenode, I get all 5 of my icons and the text in a nice tidy drag view with the text flowing over as many lines as necessary and perfectly left justified.

<span runat="server" id="NodeText" class="rtIn"
style="display: inline-block !important; width:650px; white-space:normal; border-color:transparent">
</span>

it just won't work from a styleseheet !

I hope that helps someone !

jON

 

[Ivan Danchev]

Hello jON,

Thank you for sharing your solution with the community.

Regards,
Ivan Danchev
Telerik