Selectfield style in iPhone

[jdb]

iOS always layouts selectfield like A. How can I force it to show as B?
I have gone nuts through the css file but didn't make it :(

27701

Any help appreciated...

[tomalex0]

Picker and List for selectfield are shown based on the device you are using. For iphone it will be the picker and for ipad and browsers it will the list.

If you want to use List for all conditions you have to extend current selectfield or override.

Below override or extend should work for you. But im not sure how it will work with iphone devices.
Try it and let me know if this works in device.


Ext.override(Ext.form.Select, {
// @private
showComponent: function() {
var listPanel = this.getListPanel(),
index = this.store.findExact(this.valueField, this.value);

listPanel.showBy(this.el, 'fade', false);
listPanel.down('#list').getSelectionModel().select(index != -1 ? index: 0, false, true);
}
});






Ext.form.ListSelect = Ext.extend(Ext.form.Select, {
// @private
showComponent: function() {
var listPanel = this.getListPanel(),
index = this.store.findExact(this.valueField, this.value);

listPanel.showBy(this.el, 'fade', false);
listPanel.down('#list').getSelectionModel().select(index != -1 ? index: 0, false, true);
}
});
Ext.reg('listselectfield', Ext.form.ListSelect);

[jdb]

Works great!
Just a couple of issues (which is not your code, it is general for selectfield) when label has two or more lines: (1) it is not centered vertically and (2) there is a black box below the dropdown (which is closed):

27719