Page 2 of 2 FirstFirst 12
Results 11 to 18 of 18

Thread: Select Field Popup Has Extra Blank Space at the Botoom

    Success! Looks like we've fixed this one. According to our records the fix was applied for TOUCH-2197 in a recent build.
  1. #11

    Default

    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.

  2. #12
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661

    Default

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

    Sencha Inc

    Jamie Avins

    @jamieavins

  3. #13

    Default

    I actually tried adjusting it via a CSS override:

    Code:
    .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):

    Code:
    getListPanel().setHeight(250);
    but getListPanel seems to be not available anymore in the GA release.

    Any ideas?

  4. #14
    Sencha User
    Join Date
    Mar 2012
    Location
    Lahore, Pakistan
    Posts
    2

    Default Select Field extra space workaround

    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!

  5. #15

    Default

    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
    Code:
    .x-select-overlay{
        min-width: 200px; 
        min-height:0px;
        height: 250px;
    }
    thanks again!

  6. #16
    Sencha User
    Join Date
    Mar 2012
    Location
    Lahore, Pakistan
    Posts
    2

    Default

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

  7. #17
    Ext JS Premium Member
    Join Date
    Oct 2010
    Posts
    80

    Default

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

  8. #18
    Sencha User rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,159

    Default

    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.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

Page 2 of 2 FirstFirst 12

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •