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


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: Logo

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s

%d bloggers like this: