This is a migrated thread and some comments may be shown as answers.

Text wrap and indentation

19 Answers 204 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Soonam m lal
Top achievements
Rank 1
Soonam m lal asked on 11 Jan 2010, 07:54 AM
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

19 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 1
answered on 11 Jan 2010, 09:28 AM
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.
0
Soonam m lal
Top achievements
Rank 1
answered on 11 Jan 2010, 09:54 AM
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
0
Accepted
Yana
Telerik team
answered on 11 Jan 2010, 12:22 PM
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.
0
Soonam m lal
Top achievements
Rank 1
answered on 11 Jan 2010, 04:37 PM
Hi Yana,

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

-Soonam
0
Paul
Top achievements
Rank 1
answered on 15 Feb 2010, 12:07 PM
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,

0
Yana
Telerik team
answered on 17 Feb 2010, 01:52 PM
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.
0
Paul
Top achievements
Rank 1
answered on 23 Feb 2010, 03:24 PM
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
0
Yana
Telerik team
answered on 25 Feb 2010, 01:22 PM
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.
0
Paul
Top achievements
Rank 1
answered on 25 Feb 2010, 01:37 PM
Hi,

An image of the problem is here:

Wrap Problem

Thanks,
Paul
0
Yana
Telerik team
answered on 25 Feb 2010, 02:09 PM
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.
0
Paul
Top achievements
Rank 1
answered on 25 Feb 2010, 02:22 PM
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.
0
Yana
Telerik team
answered on 25 Feb 2010, 02:25 PM
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.
0
Jon Shipman
Top achievements
Rank 1
answered on 29 Oct 2010, 04:06 PM
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!

0
Yana
Telerik team
answered on 04 Nov 2010, 09:51 AM
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
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
0
Jon Shipman
Top achievements
Rank 1
answered on 04 Nov 2010, 04:58 PM
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;
}
0
Yana
Telerik team
answered on 10 Nov 2010, 11:12 AM
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
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
0
Jon Shipman
Top achievements
Rank 1
answered on 17 Feb 2011, 09:02 PM
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.




0
Jon
Top achievements
Rank 1
answered on 21 Jul 2015, 04:42 PM

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

 

0
Ivan Danchev
Telerik team
answered on 24 Jul 2015, 01:36 PM
Hello jON,

Thank you for sharing your solution with the community.

Regards,
Ivan Danchev
Telerik
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 Feedback Portal and vote to affect the priority of the items
Tags
TreeView
Asked by
Soonam m lal
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 1
Soonam m lal
Top achievements
Rank 1
Yana
Telerik team
Paul
Top achievements
Rank 1
Jon Shipman
Top achievements
Rank 1
Jon
Top achievements
Rank 1
Ivan Danchev
Telerik team
Share this question
or