1. #1
    Ext JS Premium Member
    Join Date
    Oct 2010
    Posts
    75
    Vote Rating
    1
    JimR is on a distinguished road

      0  

    Question Can tree lines wrap for long text?

    Can tree lines wrap for long text?


    I'd like to put long text in tree nodes (like a paragraph) and have it all displayed, rather than cut off at the end of one line. Is there a way to allow nodes to wrap text and take up as much vertical space as they need?

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,735
    Vote Rating
    756
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You can inspect the DOM To play with the CSS rules to make it wrap.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Ext JS Premium Member
    Join Date
    Oct 2010
    Posts
    75
    Vote Rating
    1
    JimR is on a distinguished road

      0  

    Default


    I've tried. I've changed white-space to normal (it is set to nowrap by default), clip is auto (which means no clipping), I've adjusted the line heights to see if that was limiting the box from growing, I've set overflow to visible... Running out of ideas. Any thoughts?

    Here is the firebug "Computed" output for one row of the tree after applying my custom css (not all changes I tried are repsented here, since when some didn't do anything I reverted them):
    font-family tahoma,arial,verdana,sans-serif
    font-size 11px
    font-weight 400
    font-style normal
    font-size-adjust none
    color #FF0000
    text-transform none
    text-decoration none
    letter-spacing normal
    word-spacing
    line-height 16px
    text-align left
    vertical-align middle
    direction ltr
    text-overflow ellipsis


    Background

    background-color transparent
    background-image none
    background-repeat repeat
    background-position 0 0
    background-attachment scroll
    opacity 1


    Box Model

    width 486px
    height 18px
    top auto
    right auto
    bottom auto
    left auto
    margin-top
    margin-right
    margin-bottom
    margin-left
    padding-top
    padding-right
    padding-bottom
    padding-left
    border-top-width
    border-right-width
    border-bottom-width
    border-left-width
    border-top-color #FF0000
    border-right-color #FF0000
    border-bottom-color #FF0000
    border-left-color #FF0000
    border-top-style none
    border-right-style none
    border-bottom-style none
    border-left-style none
    box-shadow none


    Layout

    position static
    display block
    visibility visible
    z-index auto
    overflow-x visible
    overflow-y visible
    white-space normal
    clip auto
    float none
    clear none


    Other

    cursor pointer
    list-style-image none
    list-style-position outside
    list-style-type disc
    marker-offset auto

  4. #4
    Ext JS Premium Member
    Join Date
    Oct 2010
    Posts
    75
    Vote Rating
    1
    JimR is on a distinguished road

      0  

    Default


    Never mind -- it is the "line-height" tag on x-grid-cell-inner. I'll post the change when I find an elegant one, since I've seen this question asked before.

  5. #5
    Ext JS Premium Member
    Join Date
    Oct 2010
    Posts
    75
    Vote Rating
    1
    JimR is on a distinguished road

      0  

    Default Multi-line tree entries with indent for lines after first to line up after icon

    Multi-line tree entries with indent for lines after first to line up after icon


    Here is the solution, for those who do not wish to change things programmatically (which might be cleaner in terms of making sure nothing else is inadvertently targeted). This requires nothing but CSS.

    Code:
    /* tree_wrap should be set as the cls for your TreePanel, under Ext.AbstractComponent
      However, this will place tree-wrap several div's up the heirarchy from the actual 
      element you are targeting. So, x-grid-cell-inner is used with a descendent selector
      to be more precise. Hopefully, the combination will avoid applying the styles to
      anything unintended.
      
      Only the height and white-space are actually needed. The other lines make it pretty.
    */
    div[class~="tree_wrap"] div[class~="x-grid-cell-inner"]
     {
     height:    auto   !important;
     white-space:  normal  !important;
     text-indent: -3.3em  !important;
     padding-left: 3.3em   !important;
     padding-right: 1em  !important;
     }

  6. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,735
    Vote Rating
    756
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Very very nice work!!!
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  7. #7
    Touch Premium Member
    Join Date
    Apr 2010
    Posts
    34
    Vote Rating
    0
    epinc is on a distinguished road

      0  

    Default


    OK I am missing something

    I added the css, added cls:"tree_wrap" to my tree panel, and still no wrap.

    What am I missing? Thanks!

  8. #8
    Ext JS Premium Member
    Join Date
    Oct 2010
    Posts
    75
    Vote Rating
    1
    JimR is on a distinguished road

      0  

    Default


    I hate to say this because it's so common as to be trite, but it's true: Firebug is your friend. That's the only way I figured this out, and it's probably how to tell what's wrong in your case. Is the style being applied where you think it is? If you can't find the problem and can post a working version of your code somewhere, I'd be happy to take a look.

Thread Participants: 2

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar