View Full Version : Change height of column header in treepanel?

10 Jul 2012, 1:13 PM
How do I go about changing the height of a column header in a treepanel? Looks like it defaults to 22, but I'd like it to be more than twice that much.


10 Jul 2012, 4:39 PM
You can use the following:

.x-panel-header { height: 40px; }


11 Jul 2012, 8:51 AM
Thanks, Scott. Unfortunately, it looks like this resizes the panel header, not the column header. Any other ideas?

11 Jul 2012, 8:59 AM
Looks like .x-grid-header-ct will do it. Thanks!

11 Jul 2012, 10:51 AM
If anyone sees this thread in the future and wants a full solution, here's what I did to increase the height of my treepanel column headers to 50px:

In my treepanel, set a componentCls, such as componentCls: 'mygreattree'

Then, in my custom CSS file, set the following:

/* Makes the tree column header taller */
.mygreattree .x-grid-header-ct {
height: 50px;

/* Moves the tree down so that it renders below the newly-taller treepanel column headers */
.mygreattree .x-grid-body {
top: 50px;

If there's a better solution, I'm all ears!

16 Jul 2012, 5:36 AM
As it turns out, this solution almost works, but there are still problems.

Unfortunately, the treepanel doesn't seem to understand its own height after I've modified the CSS to give it a taller header.

Because of that, the bottom of the tree gets cut off - it's like the bounding box for the tree still thinks the header is the original, shorter height, even though the root of the tree *is* correctly rendering at the bottom of the new, taller header.

Can anyone point me in the right direction to understand where treepanel calculates its height so that I can modify this code?