Select Field Popup Has Extra Blank Space at the Botoom

[f_li]

Sencha 2.0 Beta 3

When touched, the select field popup seems now have extra blank space (several rows) at the botom of the list of availbale options.

[Jamie Avins]

Thank you for the report.

[rdougan]

Do you have an example, testcase or a screenshot of this?

I can't see the same problem.

[j.k]

http://docs.sencha.com/touch/2-0/tou...tml#demo/forms

Just click on the "Rank" selectfield and a huge popup appears (caused by the min-height definition for .x-select-overlay, as far as I can tell)

[paul_todd]

You can also see it in the select field documentation http://docs.sencha.com/touch/2-0/#!/api/Ext.field.Select in the live preview

[f_li]

The attached capture shows the space at the bottom.

[Jamie Avins]

Thank you for the examples. We'll will take another look

[rdougan]

This has always been the case in 2.x. This happens now because we use 100% CSS layouts now, and there is no way of doing this reliably. You will have to set the width and height of your select overlay manually.

[j.k]

You actually can style the popup to be the exact height of its contents if you override the Select#getTabletPicket() method as follows:

    getTabletPicker: function() {
        var config = this.getDefaultTabletPickerConfig();

        if (!this.listPanel) {
            this.listPanel = Ext.create('Ext.Panel', Ext.apply({
                centered: true,
                modal: true,
//                cls: Ext.baseCSSPrefix + 'select-overlay', // commented out because of minHeight
                layout: 'vbox', // layout changed from fit to vbox
                width: 300, // manual width
                hideOnMaskTap: true,
                items: {
                    xtype: 'list',
                    store: this.getStore(),
                    scrollable: false, // disable scrolling
                    itemTpl: '<span class="x-list-label">{' + this.getDisplayField() + '}</span>',
                    listeners: {
                        select : this.onListSelect,
                        itemtap: this.onListTap,
                        scope  : this
                    }
                }
            }, config));
        }

        return this.listPanel;
    }, 

I'm not sure though, if disabling scrolling is an acceptable solution.

[f_li]

Thank you J.K. That would work.