Threaded View

    Success! Looks like we've fixed this one. According to our records the fix was applied for TOUCH-4443 in a recent build.
  1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    6
    Vote Rating
    1
    sf_cs is on a distinguished road

      1  

    Default Selectfield label and description are displayed below each other

    Selectfield label and description are displayed below each other


    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:

    Code:
    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
    Attached Images