CODEWITHSUNDEEP
sencha-touch-2textfield
jos11
jos11

Reputation: 509

change the selectfield width in sencha

I have the next code:

Ext.create('Ext.form.Panel', {
    fullscreen: true,
    items: [
        {
            xtype: 'fieldset',
            title: 'Select',
            items: [
                {
                    xtype: 'selectfield',
                    label: 'Choose one',
                    options: [
                        {text: 'First Option',  value: 'first'},
                        {text: 'Second Option', value: 'second'},
                        {text: 'This is a long text to test the selectfield',  value: 'third'}
                    ]
                }
            ]
        }
    ]
});

I want to change the selectfield width since the third option is very long.

Upvotes: 0

Views: 1078

Answers (3)

ajaykumar
ajaykumar

Reputation: 656

The above result would override the select field overlay in entire application.

To be more precise and accurate, you can override the width or height property by using select field defaultPhonePickerConfig or defaultTabletPickerConfig in your specific selectfield.eg`.

{
    xtype: 'selectfield',
    defaultPhonePickerConfig: {
        height: '8em',
        width:'10em'
    },
    defaultTabletPickerConfig: {
        height: '8em',
        width:'10em'
    },
}

Upvotes: 1

Nico Grunfeld
Nico Grunfeld

Reputation: 1133

There are the width and the maxWidth configs for that.

EDIT:

div.x-select-overlay { width: 15em !important }

Upvotes: 1

jos11
jos11

Reputation: 509

I have finally solved this with:

.x-select-overlay{
min-width: 25em !important;
}

in app.scss

Upvotes: -1

Related Questions