PDA

View Full Version : How to change accordion header size



DonExt
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.

Don

Condor
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).

DonExt
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.

Animal
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.

DonExt
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;
padding-bottom:1px;
padding-top:1px;


}

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

Animal
11 Oct 2009, 3:18 AM
Use either

http://www.extjs.com/deploy/ext-3.0.0/docs/?class=Ext.Panel&member=cls

or

http://www.extjs.com/deploy/ext-3.0.0/docs/?class=Ext.Panel&member=id

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

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