PDA

View Full Version : Changing Ext.panel.Header Size



dorgan
12 Aug 2011, 5:29 PM
I have figured out via CSS how to change the font size of a Panel Header. And I was able to create a custom Ext.panel.Header and set the height, however that does not seem to be effecting everything it should.

So what is the proper way of changing the Ext.panel.Header height?

tobiu
13 Aug 2011, 1:53 AM
hi donald,

panel headers do not use a heigth style directly. in SASS you have a variable to change the padding which works nice for this:



$panel-header-padding : 10px !default;


you can change only top and bottom padding to get the effect.

this affects the css:


.x-panel-header {
padding: 10px;
}




best regards
tobias

mitchellsimoens
13 Aug 2011, 8:57 AM
You can use setHeight on the header if you so choose too.


Ext.create('Ext.panel.Panel', {
renderTo : Ext.getBody(),
width : 400,
height : 400,
title : 'HI',
html : 'Hello',

listeners : {
afterrender : function(panel) {
var header = panel.header;
header.setHeight(100);
}
}
});

Or specify your own as a config (header)

nextSTEP
21 Sep 2011, 7:28 AM
Hi dorgan, how did you specify the font-size for the panel header?

I hope you didn't do this via inline CSS setting HTML like this: <span style="font-size:20pt;">Title</span>

I'm looking for a solution that let's me do this via CSS class. Someone who knows?

rgaston
28 Oct 2011, 3:03 PM
nextSTEP:

I got what you described working as follows...

CSS:

.my-panel .x-panel-header {
height: 32px;
}
.my-panel .x-panel-header-text {
font-size:15px;
}
.my-panel .x-panel-header-body {
height: 20px;
}
/*------------------------------
Hack to make this work in IE (8 at least)
(framed header collapses at a height of n+4)
--------------------------------*/
.x-ie .my-panel .x-panel-header-body {
height: 28px;
}


JavaScript:

Ext.create('Ext.panel.Panel', {
title: 'My Panel',
cls: 'my-panel'
// rest of panel config...
});

hest
11 Jun 2012, 6:08 PM
3Q
you have tell how to deal with things like this
3Q

hest
11 Jun 2012, 6:09 PM
nextSTEP:

I got what you described working as follows...

CSS:

.my-panel .x-panel-header {
height: 32px;
}
.my-panel .x-panel-header-text {
font-size:15px;
}
.my-panel .x-panel-header-body {
height: 20px;
}
/*------------------------------
Hack to make this work in IE (8 at least)
(framed header collapses at a height of n+4)
--------------------------------*/
.x-ie .my-panel .x-panel-header-body {
height: 28px;
}


JavaScript:

Ext.create('Ext.panel.Panel', {
title: 'My Panel',
cls: 'my-panel'
// rest of panel config...
});
3Q

jdflores
2 May 2013, 11:04 AM
Also you can try with the header property:

header : {
height : 50
},

theraaaz
12 Dec 2013, 5:50 AM
header : {
height : 10
}
It not worked for me. Header title disappeared and items gone under header..47199