Adjusting text margins on panel header

[XPEHBAM]

Currently, I have my headers styled like this:

header.png

The issue here is that there is space at the bottom and left of the text. I would like to have there be no space on left and about 5px at the bottom. I cannot find a way to do this. The margins and padding seem to already be at 0. I tried experimenting with

top: 10px

, however it only works when editing the CSS in Chrome developer tools. The header does not pick it up from the CSS and reverts to auto. Moreover, adjusting top seems to mess other alignments up somewhat.

[EPV]

Something like this?

http://jsfiddle.net/EmilPennlov/7QCSt/1/

Good luck / E

[XPEHBAM]

I took your advice and used:

.myPanel.x-panel-header-horizontal {   padding: 0 0 0 0;
}

header.png

However, there is some space vertically. I am using size 10px font, so it isn't as filled as yours. Is there a way to adjust height?

.myPanel.x-panel-header {    background-color:#FFFFFF; 
    background-image:none;
    height: 14px;
}

is not doing it for me.

[EPV]

line-height?

http://jsfiddle.net/EmilPennlov/7QCSt/2/

[XPEHBAM]

For some reason adjusting line-height only works when it's done in real time (developer tools). When I set line-height to the proper amount in the css file, the text gets drawn in the exact same place. Increasing the the line-height further in real time then adjusts it down.

[EPV]

What is the difference with your code and the Fiddle above?

Maybe "important" can help you:

line-height:10px !important!

[XPEHBAM]

Unfortunately,

!important

does not help.

My code is like this:

Ext.define('mytype', {    extend: 'Ext.panel.Panel',


    initComponent: function() {
        Ext.apply(me, {
            title: 'NOTIFICATION SUBSCRIPTION',
            cls: 'myPanel',
            height: 125,
            resizeable: 'false',
            items: this.createItems(),
            border: false
        });


        me.callParent();
    },
    
    createItems: function() {
        ...
    }


});

I have several of those panels in a VBOX layout.

.myPanel .x-panel-body {    border-top-color:#000000;
}


.myPanel .x-panel-header {
    background: none;
    background-image:none;
}


.myPanel .x-panel-header-horizontal {
   padding: 0 0 0 0;
}


.myPanel .x-panel-header-text {
   font-size: 12px; font-weight: normal; color: #b5b5b5;
   line-height: 25px; !important; 
}

Copying code for the single panel into JSfiddle renders it correctly there... Perhaps I have some inherited CSS that is preventing it from being rendered correctly.