Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    6
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

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

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


    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.

    Code:
    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
        }]
    });

  2. #2
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    6
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


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

  3. #3
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    6
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    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.

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

  4. #4
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    6
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    Weird, I can't find the source of it. Firebug states it's here:

    Code:
    .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:

    Code:
    .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?

  5. #5
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    6
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    Ok, I don't get it but:

    Definining like this:
    Code:
    .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:
    Code:
    .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

  6. #6
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    6
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    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.

  7. #7
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,943
    Vote Rating
    636
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Fixed in SVN. If there are issues with the others we'll update them as needed.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

Thread Participants: 1