Select Field Popup Has Extra Blank Space at the Botoom

[squarefan]

Still experiencing the problem with the public Touch 2 release. Until it is release is there an easy fix to set the height?

the old way of using: Ext.getCmp('lang').getListPanel().setHeight(250); doesn't work anymore.

[Jamie Avins]

We'll see how we can make the configuration of this easier.

[squarefan]

I actually tried adjusting it via a CSS override:

.x-select-overlay {    
width: 100px;
}

This works until a certain threshhold in width .. but it will not resize the popup width under ~316px. Interestingly I can expand it no problem e.g. 400,500, 600 etc. Height behaves in the same way.

and in code via (which worked under Touch 2 Beta):

getListPanel().setHeight(250);

but getListPanel seems to be not available anymore in the GA release.

Any ideas?

[umais]

Hi, I just tried something to fix this problem; though it took me an hour or so in order to come to this solution. The extra space in the select field is caused by one of the CSS files, sencha-touch.css that has a minimum height set so, even if you try to change the height, it does not work at all. Looking into the Select.js file in the "src" folder of sencha touch, I figured out a way to set the height of the list panel that is shown as "options" of the select field. The next problem is solved by the "inspect element" option in the Chrome, which showed me where the min height style is implemented. So, here's my solution: you remove the min-height style property and then set the height of "option" list after the select field is declared. It worked for me.

Solution:

1. open "sencha-touch.css" (~touch\resources\css\sencha-touch.css)
2. since it's not propert formatted, find "22em" which will be found in ".x-select-overlay{}" at column 139899, the original style would be like this: .x-select-overlay{min-width:18em; min-height:22em;} -- Remove the "min-height" attribute and save the CSS file. Now if you run the code, the height is 0 so you have to set the height manually according to the data you have and the min/max height values you want.
3. use the following code to set the height of the list panel that displays "options":

~.query('selectfield')[0].getTabletPicker().setHeight(200);

if the panel containing the select field is named "search" (like var search = new Ext.form.Panel({...});), the command would be "search.query('selectfield')[0].getTabletPicker().setHeight(156);"

That's it, you're done!

[squarefan]

Hi,

great thanks for info and time you put into it!

It is not a good idea though to update that directly in the touch.css. Better you add your own stylesheet and just override the formatting there. That way you can upgrade to newer versions of Touch 2 without having to re-edit the files!

e.g. in a seperate CSS added after the touch.css in your index.html

.x-select-overlay{
    min-width: 200px; 
    min-height:0px;
    height: 250px;
}

thanks again!

[umais]

Yes, that is a better solution to have it overridden in a seperate CSS file.

[suzzer99]

The problem with over-riding the min-height in the CSS file is that after you do that, then you can't select the last item in the picker.

The Kitchen Sink is doing the exact same thing right now: http://docs.sencha.com/touch/2-0/#!/...e/kitchen-sink (go to user interface - forms and click on rank - you can't select the last item, it just snaps back to the next to last - our site is doing the same thing).

[rdougan]

You can change this in 2.0.1 by setting the defaultTabletPickerConfig config.

We cannot remove the height because we now use CSS layouts, so the list height cannot be known.