[FIXED][3.x] BorderLayout collapsible header difference

[mjlecomte]

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]

Looks like collapsible makes a 15px high header, as opposed to 13px high with collapsible=false.

[mjlecomte]

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]

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]

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]

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]

Fixed in SVN. If there are issues with the others we'll update them as needed.