Text wrap and indentation

20 posts, 1 answers
  1. Soonam m lal
    Soonam m lal avatar
    3 posts
    Member since:
    Jan 2010

    Posted 11 Jan 2010 Link to this post

    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
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 11 Jan 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Soonam m lal
    Soonam m lal avatar
    3 posts
    Member since:
    Jan 2010

    Posted 11 Jan 2010 Link to this post

    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
  5. Answer
    Yana
    Admin
    Yana avatar
    4554 posts

    Posted 11 Jan 2010 Link to this post

    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.
  6. Soonam m lal
    Soonam m lal avatar
    3 posts
    Member since:
    Jan 2010

    Posted 11 Jan 2010 Link to this post

    Hi Yana,

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

    -Soonam
  7. Paul
    Paul avatar
    31 posts
    Member since:
    Sep 2012

    Posted 15 Feb 2010 Link to this post

    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,

  8. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 17 Feb 2010 Link to this post

    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.
  9. Paul
    Paul avatar
    31 posts
    Member since:
    Sep 2012

    Posted 23 Feb 2010 Link to this post

    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
  10. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 25 Feb 2010 Link to this post

    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.
  11. Paul
    Paul avatar
    31 posts
    Member since:
    Sep 2012

    Posted 25 Feb 2010 Link to this post

    Hi,

    An image of the problem is here:

    Wrap Problem

    Thanks,
    Paul
  12. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 25 Feb 2010 Link to this post

    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.
  13. Paul
    Paul avatar
    31 posts
    Member since:
    Sep 2012

    Posted 25 Feb 2010 Link to this post

    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.
  14. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 25 Feb 2010 Link to this post

    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.
  15. Jon Shipman
    Jon Shipman avatar
    43 posts
    Member since:
    Nov 2009

    Posted 29 Oct 2010 Link to this post

    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!

  16. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 04 Nov 2010 Link to this post

    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
  17. Jon Shipman
    Jon Shipman avatar
    43 posts
    Member since:
    Nov 2009

    Posted 04 Nov 2010 Link to this post

    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;
    }
  18. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 10 Nov 2010 Link to this post

    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
  19. Jon Shipman
    Jon Shipman avatar
    43 posts
    Member since:
    Nov 2009

    Posted 17 Feb 2011 Link to this post

    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.




  20. Jon
    Jon avatar
    14 posts
    Member since:
    May 2014

    Posted 21 Jul 2015 in reply to Jon Shipman Link to this post

    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

     

  21. Ivan Danchev
    Admin
    Ivan Danchev avatar
    829 posts

    Posted 24 Jul 2015 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017