1. #1
    Sencha User
    Join Date
    Feb 2011
    Posts
    174
    Vote Rating
    1
    Answers
    10
    netemp is on a distinguished road

      0  

    Default Unanswered: ExtJs 4 - How to wrap a column header text to fit in the column width?

    Unanswered: ExtJs 4 - How to wrap a column header text to fit in the column width?


    I have a grid which has long phrases as header text.

    The problem is that this text is never displayed properly as per the length of the column.

    The question is - "Is there any way to wrap the header text as per the width available for the column?"

    Attached is a screenshot of the issue.

    Thanks in advance.
    Attached Images

  2. #2
    Sencha User
    Join Date
    Feb 2011
    Posts
    174
    Vote Rating
    1
    Answers
    10
    netemp is on a distinguished road

      0  

    Default Solution not working in IE9

    Solution not working in IE9


    A fellow-developer has shared this solution:

    Code:
    .x-column-header-inner .x-column-header-text {
        white-space: normal;
    }
    
    .x-column-header-inner {
        line-height: normal;
        padding-top:3px!important;
        padding-bottom:3px!important;
        text-align: center;
        top:20%;
    }
    Including this hack makes things work fine in Mozilla but there is no effect in IE9.

    Any clue?

    Thanks in advance.

  3. #3
    Ext JS Premium Member
    Join Date
    Oct 2011
    Location
    Brussels
    Posts
    10
    Vote Rating
    0
    nikadod is on a distinguished road

      0  

    Default


    Any reliable solution on this issue?

  4. #4
    Ext JS Premium Member Joyfulbob's Avatar
    Join Date
    Feb 2008
    Posts
    176
    Vote Rating
    1
    Joyfulbob is on a distinguished road

      0  

    Default This works...

    This works...


    We use this:

    PHP Code:
    {
          
    header'Price<br>2nd row<br>3rd row', ...


  5. #5
    Ext JS Premium Member
    Join Date
    Sep 2008
    Location
    Raleigh, NC
    Posts
    145
    Vote Rating
    5
    qooleot is on a distinguished road

      1  

    Default


    In case anyone else comes across this:

    Code:
    .x-column-header-inner, .x-column-header-inner span { white-space:normal !important; }

  6. #6
    Sencha User
    Join Date
    Apr 2007
    Posts
    37
    Vote Rating
    3
    Answers
    1
    abhijit is on a distinguished road

      1  

    Default CSS3 Solution

    CSS3 Solution


    PHP Code:
    .x-column-header-text {
      
    display block;
      
    overflow hidden;
      
    text-overflow ellipsis;