View Full Version : How to change accordion header size

10 Oct 2009, 11:38 AM
I need to change the Accordion header area that contains the title. I am new to the concept of manipulating extjs styles. Specifically, I need to reduce the header height. And, of course, I only want this change on a local level with no global ramifications.

Any help would be appreciated.


10 Oct 2009, 11:42 AM
Give the panel in question a cls (e.g. cls:'small-header') and create css rules to change the header font size and collapse tool (poke the current DOM with Firebug to see which css classes make up the panel header).

10 Oct 2009, 11:51 AM
Thanks for response. Questions:

1. Does the font size determine the header height?

2. If I add a style using cls: does that allow me to override individual values of the parent class?

3. I believe the accordion header style is ".x-accordion-hd", but I have no idea what to do with this knowledge. I must be missing some basic concepts.

4. Knowing what my goal is, can you provide me with a small code snippet to get me on my way?

Thanks so much.

10 Oct 2009, 11:17 PM
Tutorial: http://www.w3schools.com/css/

The standard: http://www.w3.org/TR/CSS2/

Specifically, you will want to focus on http://www.w3.org/TR/CSS2/selector.html in order to understand how to use class names of elements to create rules which target the elements that you want to style.

Right click and "Inspect Element" will allow you to examine exactly what CSS classes an element has, in Firebug's HTML tab, and to the right of that pane the "Style" tab will tell you how it is being styled. You can actually see the styles cascading down onto the element.

11 Oct 2009, 3:16 AM
I have identified that the following padding values determine the height of the accordion:

.x-accordion-hd {
background:transparent none repeat-x scroll 0 -9px;
border-top:0 none;


Now, how do I override the padding values in my accordion only without effecting the accordion globally?

11 Oct 2009, 3:18 AM
Use either




Either of these allow you to create a CSS selector which will target only the headers you want.

11 Oct 2009, 4:03 AM
Amazing. That did it. Thanks, I learned a lot.