SelectField popup styling

[grizzly21]

Hi,

I have a select field that opens a pop up with selectable choices if I click on it. My question is, how do I get to style this pop up (with css)? (I need to adjust it's size).
The problem is that I can't set the id on it, and although I set an id on the select field, the pop up itself is not child of the field in the dom but its on a much higher level (so I can't write a css rule that selects that kind of element inside the given select field).

If I style the popup instead regardless of which field it belongs to, it will be styled for all instances of course, which I don't want to do..

[eastlander]

I had the same problem, my items didn't fit because the width of the popup was too small.
What you can do is set the property: usePicker: true which opens a picker instead of popup.

[mitchellsimoens]

There are two different things you can style. For a phone it uses a picker that comes from the bottom where you can configure with the defaultPhonePickerConfig config on the select field. For the floating panel with a child list you can use defaultTabletPickerConfig config.

[coolfish]

Mitchell I'm not sure exactly what to do with the popupStyling. Basically I'd like to adjust the height of the popup based on the number of items to display. Usually I only have 2-3 items in there (it is dynamic), but currently the popup sizes to about 10 items. usePicker:true doesn't look great on a tablet. Any suggestions?

Thanks

[grizzly21]

It's been a while since I dealt with this, but I think I solved it with this config on the selectfield:

"defaultTabletPickerConfig": [
                            "{id: \"myPicker\"} // so we can change the size (width) in css"
                        ]

Either this, or getting the needed object through a chain of getters on the select field

[coolfish]

Ahkay, yea that seems like a reasonable solution. I just modified the sencha code to simply adjust the height ( within reason) based on the number of items in the store. It's not perfect but I'm curious why not have something similar in there the first place, rather than a big ol' popup with lots of unnecessary whitespace.

showPicker: function() {
        var store = this.getStore();
        //check if the store is empty, if it is, return
        if (!store || store.getCount() === 0) {
            return;
        }


        if (this.getReadOnly()) {
            return;
        }


        this.isFocused = true;


        if (this.getUsePicker()) {
            var picker = this.getPhonePicker(),
                name   = this.getName(),
                value  = {};


            value[name] = this.getValue();
            picker.setValue(value);
            if (!picker.getParent()) {
                Ext.Viewport.add(picker);
            }
            picker.show();
        } else {
            var listPanel = this.getTabletPicker(),
                list = listPanel.down('list'),
                index, record;


            store = list.getStore();
            //added the following.
            var height = list.getStore().getCount() * 53;
			if( height > 318 ){
				height = 318;
           	}	 		 		
            listPanel.setHeight( height + 'px' );
            // end changes. ideally the 53 number would be automagically obtained from the list item cmp.

             index = store.find(this.getValueField(), this.getValue(), null, null, null, true);
            record = store.getAt((index == -1) ? 0 : index);


            if (!listPanel.getParent()) {
                Ext.Viewport.add(listPanel);
            }


            listPanel.showBy(this.getComponent());
            list.select(record, null, true);
        }
    },

[fmoseley]

I modified your override to use the lists itemHeight in the calculation rather than the hardcoded 53. This appeared to be slightly off as the height of the last item in the list seemed to be smaller than the rest. Adding an offset of 3 seems to have made it better. In short I changed

var height = list.getStore().getCount() * 53;

to

var height = list.getStore().getCount() * (list.getItemHeight() + 3);

[coolfish]

Nice, maybe we will see that in ST 2.1.2

BTW to patch this for builds, the file is sdk/src/field/Select.js