PDA

View Full Version : [FIXED][3.x] BorderLayout collapsible header difference



mjlecomte
29 Mar 2009, 12:26 PM
Edit: solution with justification follows in subsequent posts.

There's a small height difference of the header due to collapsible setting. Noticed this on FF 3.0.8 and IE7.

Lemme know if you need a visual.



var border = new Ext.Panel({
renderTo: document.body,
width: 700,
height: 500,
title: 'Border Layout',
layout:'border',
items: [{
title: 'South Region is resizable',
region: 'south', // position for region
height: 100,
split: true, // enable resizing
minSize: 75,
maxSize: 150,
margins: '0 5 5 5'
},{
title: 'West Region is collapsible',
region:'west',
margins: '5 0 0 5',
width: 200,
collapsible: true, // make collapsible
cmargins: '5 5 0 5', // adjust top margin when collapsed
id: 'west-region',
layout: 'fit'
},{
title: 'Center Region',
region:'center', // center region is required
margins: '5 5 0 0',
// collapsible: true // toggle this
}]
});

mjlecomte
29 Mar 2009, 12:29 PM
Looks like collapsible makes a 15px high header, as opposed to 13px high with collapsible=false.

mjlecomte
29 Mar 2009, 12:44 PM
This looks to be the problem. Note the line numbers so the 15px gets overridden. I imagine this is due to the split of the css structure/visual where the old hierarchy (inclusion order) has changed now.



//ext-all.css (line 3521)
.x-panel-header {
line-height:15px;
}

//ext-all.css (line 6189)
.x-panel-header {

line-height:normal;
}

mjlecomte
29 Mar 2009, 1:01 PM
Weird, I can't find the source of it. Firebug states it's here:



.x-panel-header {ext-all.css (line 6189)
-x-system-font:none;
background-image:url(../images/default/panel/white-top-bottom.gif);
border-color:#99BBE8;
color:#15428B;
font-family:tahoma,arial,verdana,sans-serif;
font-size:11px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
}


But the only thing explicitly set is:



.x-panel-header {
color:#15428b;
font:bold 11px tahoma,arial,verdana,sans-serif;
border-color:#99bbe8;
background-image: url(../images/default/panel/white-top-bottom.gif);
}

I guess one of these implicitly sets line height somehow?

mjlecomte
29 Mar 2009, 1:14 PM
Ok, I don't get it but:

Definining like this:


.x-panel-header {
color:#15428b;
font-family: tahoma,arial,verdana,sans-serif;
font-weight: bold;
font-size: 11px;
/*font:bold 11px tahoma,arial,verdana,sans-serif;*/
border-color:#99bbe8;
background-image: url(../images/default/panel/white-top-bottom.gif);
}


is parsed into this by the browser:


.x-panel-header {ext-all.css (line 6189)
background-image:url(../images/default/panel/white-top-bottom.gif);
border-color:#99BBE8;
color:#15428B;
font-family:tahoma,arial,verdana,sans-serif;
font-size:11px;
font-weight:bold;
}


Defining everything as "font" implicitly created those properties listed in prior post, which then override the 15px line height setting.

Dunno, but that fixes it for both IE7 and FF3.0.8

mjlecomte
29 Mar 2009, 1:24 PM
Fair enough:
http://www.w3.org/TR/CSS21/fonts.html#font-shorthand

I guess that's how it works eh? There's a few other places throughout where there's a font reset occurring as well. Those should probably be corrected as well to explicitly set the font properties in question.

evant
5 Apr 2009, 7:38 PM
Fixed in SVN. If there are issues with the others we'll update them as needed.