Misplaced collapsed region title in FF

[ivan5o]

REQUIRED INFORMATION

Ext version tested:

• Ext 4.1.1

Browser versions tested against:

• IE8
• FF16.0.1
• Safari 5.1.7
• Chrome 22

DOCTYPE tested against:

• HTML 4.01

Description:

• Collapsed east or west region title is misplaced in FF.

Steps to reproduce the problem:

• If the east/west region is expanded, collapse it.

The result that was expected:

• The title of region in border layout should be in the middle of collapsed region header.

The result that occurs instead:

• The title of east/west region is shifted left of the collapsed region header.

Test Case:

    Ext.onReady(function() {
        var viewport = Ext.create('Ext.Viewport', {
            layout: {
                type: 'border'
            },
            items: [{
                region: 'east',
                title: 'East',
                width: 100,
                collapsible: true,
                collapsed: true
            }, {
                region: 'west',
                title: 'West',
                width: 100,
                collapsible: true
            }, {
                region: 'center',
                title: 'Center'
            }]
        }); 
    });

HELPFUL INFORMATION


Screenshot or Video:

• collapsedregion.png

Debugging already done:

• none

Possible fix:

• not provided

Additional CSS used:

• only default ext-all.css

Operating System:

• Win 7

[kevin.chen]

I did not see you use titleAlign in your panel configuration

        Ext.create('Ext.Viewport', {
            layout: {
                type: 'border'
            },
            items: [{
                region: 'east',
                title: 'East',
                titleAlign: 'center',
                width: 100,
                collapsible: true,
                collapsed: true
            }, {
                region: 'west',
                title: 'West',
                titleAlign: 'center',
                width: 100,
                collapsible: true
            }, {
                region: 'center',
                titleAlign: 'center',
                title: 'Center'
            }]
        });

[ivan5o]

Thank for support, your code works well in non-collapsed region. I've marked the problematic title placement in the picture - only collapsed region titles are misplaced (east and west region).

All other tested browsers render the title in the right place.
collapsedregion.png

EDIT: only collapsed region titles are misplaced horizontally. It should be top-center, not top-left.

[kevin.chen]

you are right, if I assign titleAlign='center', the title in collapsed panel is not aligned to center.

titleAlign can be assigned to 'center', 'left', 'right', however, we can not assume the title in collapsed panel will be aligned to 'center', 'top', 'bottom'.

the title on collapsed panel is always on top. that is designed

[evant]

Thanks for the report, this is a known issue that has since been fixed in the current build. In the newer FF they changed the way the baseline for some drawing components are calculated. As such, in future versions we're now using CSS instead of drawing to achieve vertical text.

[ivan5o]

Thanks, evant. I'm waiting for public release of 4.1.2.