Wrapping text only Header Cell

Wrapping text only Header Cell

Posted by: sameer-boddun on 14 September 2017, 3:11 am EST

• 

  sameer-boddun

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 14 September 2017, 3:11 am EST

  Hello,

  How do I wrap text on header cell only. I have large number of columns and few have bigger header name that the data in them. I want to shorten the column width with text in header wrapped.

  Thanks
  
  Sameer

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 3:11 am EST

  Hello Sameer,
  
  You need to set white-space property to pre-wrap for wj-header class and resize the column header row. For your reference, please refer to the following code snippet for the same:

  ///// CSS
  .wj-header{
              white-space: pre-wrap !important;
          }
  
  //// Script 
  // resize column header
  flex.autoSizeRow(0,true) //<-- flex= FlexGrid instanse; 

  Hope it helps!

  Thanks,
  
  Manish Kumar Gupta

• 

  jaehyun.naekko

  • Post Options:
  • Link
    Copy

  Posted 17 August 2021, 8:38 pm EST - Updated 3 October 2022, 3:44 am EST

  Hi! Im just wondering if the accepted answer also applies with WjFlexGridDetail? i have a grid detail with a long number of characters to display but it is not wrapping the text

  

  1532×196 8.95 KB

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 18 August 2021, 9:38 pm EST

  Hi,

  As per my observation, on the screenshot you provided, you have long texts in the detailed rows which are getting overflowed outside. To resolve the issue you can need to set the CSS for the row’s cell containing the texts in it. You may refer to the code snippet below:

  .wj-cell {
    word-break: break-all;
    white-space: pre-wrap !important;
  }
  

  You may also refer to the sample demonstrating the same:

  https://stackblitz.com/edit/js-sqnuyr

  Let us know you need more help.

  Regards,
  
  Ashwin

• 

  jaehyun.naekko

  • Post Options:
  • Link
    Copy

  Posted 22 August 2021, 10:40 pm EST

  hi ashwin, the accepted answer above worked on my side. Thanks for answering! ^^