Selectfield label and description are displayed below each other

[sf_cs]

REQUIRED INFORMATION


Ext version tested:

• Sencha Touch 2.2

Browser versions tested against:

• Google Chrome 26.0.1410.64

DOCTYPE tested against:


Description:

• When using hbox/vbox layout in a fieldset the label and the value of a selectfield are displayed in to different lines.

Steps to reproduce the problem:

• Add a layout to a fieldset containing selectfields

The result that was expected:

• Label and value should appear in one line. (screenshot2.jpg)

The result that occurs instead:

• Label and value are displayed below each other. (screenshot1.jpg)

Test Case:

Ext.define('test.view.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'main',
    requires: [
        'Ext.TitleBar',
        'Ext.Video'
    ],
    config: {
        tabBarPosition: 'bottom',

        items: [
            {
                title: 'Welcome',
                iconCls: 'home',

                styleHtmlContent: true,
                scrollable: true,

                items: [{
                    docked: 'top',
                    xtype: 'titlebar',
                    title: 'Welcome to Sencha Touch 2'
                },{
                    xtype: 'fieldset',
                    layout: {
                        type: 'hbox',
                        align: 'middle'
                    },
                    title: 'About You',
                    instructions: 'Tell us all about yourself',
                    items: [{
                        xtype: 'selectfield',
                        label: 'Choose one',
                        options: [
                            {text: 'First Option',  value: 'first'},
                            {text: 'Second Option', value: 'second'},
                            {text: 'Third Option',  value: 'third'}
                        ]
                    },{
                        xtype: 'selectfield',
                        label: 'Choose one',
                        options: [
                            {text: 'First Option',  value: 'first'},
                            {text: 'Second Option', value: 'second'},
                            {text: 'Third Option',  value: 'third'}
                        ]
                    }]
                }]
            },{
                title: 'Get Started',
                iconCls: 'action',

                items: [
                    {
                        docked: 'top',
                        xtype: 'titlebar',
                        title: 'Getting Started'
                    },
                    {
                        xtype: 'video',
                        url: 'http://av.vimeo.com/64284/137/87347327.mp4?token=1330978144_f9b698fea38cd408d52a2393240c896c',
                        posterUrl: 'http://b.vimeocdn.com/ts/261/062/261062119_640.jpg'
                    }
                ]
            }
        ]
    }
});

HELPFUL INFORMATION


Screenshot or Video:

• screenshot1.jpg

See this URL for live test case: http://


Debugging already done:

• yes

Possible fix:

• the css class ".x-stretched.x-container" contains "-webkit-box-orient: vertical;". If you change that to "-webkit-box-orient: horizontal;" the bug is resolved

Additional CSS used:


Operating System:

• Win7

[mitchellsimoens]

Thanks for the report! I have opened a bug in our bug tracker.

[Marco Piccolino]

Same misbehaviour observed on several platforms, including Ubuntu/Chrome and iOS6

[Marco Piccolino]

Note: the temporary fix you suggest works well if you have only left or right labels. If you also have top or bottom labels, you need more specific selectors

here is an example to limit to left label fields:

.x-stretched.x-container.x-label-align-left {
    -webkit-box-orient: horizontal;  
}

[Jamie Avins]

This has been fixed for the next release.

[Marco Piccolino]

Many thanks Jamie.
Do you happen to have a patch, or could you post the relevant bit of code here?