RSS

ExtJS: multi-line grid headers and cells

01 Apr

By default ExtJS grids don’t allow text in headers and cells to wrap by setting white-space:nowrap in ExtJS stylesheet.

No cell text wrap

So to make header text wrap override the default css with:

.x-grid3-hd-inner { white-space: normal; }

And for the cells:

.x-grid3-cell-inner { white-space: normal; }

For both:

.x-grid3-hd-inner, .x-grid3-cell-inner { white-space: normal; }

Cell text wrap

Advertisements
 
2 Comments

Posted by on April 1, 2011 in Sencha

 

Tags: , ,

2 responses to “ExtJS: multi-line grid headers and cells

  1. Meg

    July 13, 2011 at 11:21 pm

    Any idea how I can get this to work on an EditorGridPanel without the header hover and sort button looking off?

     
  2. Meg

    July 16, 2011 at 2:08 am

    I hate it when I’m looking for help with something and all the the threads I can find with my problem either have no response after several years, or the OP comes back to say “nevermind, I fixed it” without saying *how*. So sorry if this is a bit blog-hijacky, but this fix worked for me:

    .x-grid3-hd-inner {height:100%; position:relative}
    .x-grid3-hd {height:100%}

    Yeah I feel kinda silly now. Anyway, it makes the button look stupid, at least in my case, but you can fix that by editing the style of .x-grid3-hd-btn, which is the right height, or its background image, which in my case was not. Cheers!

     

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: