Success! Looks like we've fixed this one. According to our records the fix was applied for
TOUCH-4443
in
a recent build.
Sencha User
Selectfield label and description are displayed below each other
REQUIRED INFORMATION
Ext version tested:
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:
See this URL for live test case: http://
Debugging already done:
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:
Attached Images
Thanks for the report! I have opened a bug in our bug tracker.
Sencha User
Confirm
Same misbehaviour observed on several platforms, including Ubuntu/Chrome and iOS6
Sencha User
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:
Code:
.x-stretched.x-container.x-label-align-left {
-webkit-box-orient: horizontal;
}
This has been fixed for the next release.
Sencha User
Thanks!
Many thanks Jamie.
Do you happen to have a patch, or could you post the relevant bit of code here?