Question

Does anyone know how to increase the amount of rows shown at one instant for date pickers and general pickers in Sencha Touch 2.0?

For example, by default, a datepicker shows 3 rows at a time but I would like to show 4.

Answer 1

I recently looked into this again and came up with a solution using css ( this will show 5 rows on the picker instead of the normal 3):

.x-sheet.x-picker {
  min-height: 305px !important;
}

This works in Sencha Touch 2.0.1. The “!important” thing isn’t necessary. Just put this css in after everything else…. For my case I have an application.css that is created using sass but I also have an app.css that is applied after that for any tweaks.
I would just set height but it would be overridden by the elements style which looks like this:

element.style {
bottom: 0px !important;
height: 220px !important;
left: 0px !important;
right: 0px !important;
z-index: 8 !important;
}

So by setting the min-height it will take precedence over height…… I am not sure if this is the best way and I am open to suggestions/improvements.