1. #1
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    98
    Vote Rating
    3
    grizzly21 is on a distinguished road

      0  

    Default Answered: SelectField popup styling

    Answered: SelectField popup styling


    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..

  2. 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.

  3. #2
    Sencha User
    Join Date
    Nov 2012
    Location
    Netherlands
    Posts
    50
    Vote Rating
    1
    Answers
    6
    eastlander is on a distinguished road

      0  

    Default


    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.

  4. #3
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,541
    Vote Rating
    872
    Answers
    3566
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      1  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #4
    Sencha User
    Join Date
    Dec 2011
    Posts
    156
    Vote Rating
    3
    Answers
    8
    coolfish is on a distinguished road

      0  

    Default


    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

  6. #5
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    98
    Vote Rating
    3
    grizzly21 is on a distinguished road

      0  

    Default


    It's been a while since I dealt with this, but I think I solved it with this config on the selectfield:
    Code:
    "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

  7. #6
    Sencha User
    Join Date
    Dec 2011
    Posts
    156
    Vote Rating
    3
    Answers
    8
    coolfish is on a distinguished road

      0  

    Default


    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.

    Code:
    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);
            }
        },

  8. #7
    Sencha - Support Team
    Join Date
    Oct 2011
    Posts
    3,977
    Vote Rating
    132
    Answers
    334
    fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all

      1  

    Default


    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


    Code:
    var height = list.getStore().getCount() * 53;
    to
    Code:
    var height = list.getStore().getCount() * (list.getItemHeight() + 3);

  9. #8
    Sencha User
    Join Date
    Dec 2011
    Posts
    156
    Vote Rating
    3
    Answers
    8
    coolfish is on a distinguished road

      0  

    Default


    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

  10. #9
    Sencha User
    Join Date
    May 2013
    Posts
    37
    Vote Rating
    1
    Answers
    3
    kidmanmatch is on a distinguished road

      0  

    Default Thanks

    Thanks


    Thank you so much, its worked for me



    Quote Originally Posted by eastlander View Post
    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.