[TIMOB-13870] Android: Date picker is too small when useSpinner set to true

GitHub Issue	n/a
Type	Bug
Priority	Critical
Status	Closed
Resolution	Fixed
Resolution Date	2013-06-05T23:17:29.000+0000
Affected Version/s	Release 2.1.4, Release 3.0.2, Release 3.1.0
Fix Version/s	2013 Sprint 12 API, 2013 Sprint 12, Release 3.1.2, Release 3.2.0
Components	Android
Labels	exalture, module_picker, qe-closed-3.1.2, qe-testadded, supportTeam
Reporter	Betty Tran
Assignee	Ping Wang
Created	2013-05-15T17:51:27.000+0000
Updated	2015-10-19T18:29:31.000+0000

Description

When creating a date or time picker and setting useSpinner to true, the picker is very small.

Code to reproduce

Ti.UI.backgroundColor = 'white';
var win = Ti.UI.createWindow({
  exitOnClose: true,
  layout: 'vertical'
});

var picker = Ti.UI.createPicker({
  type:Ti.UI.PICKER_TYPE_DATE,
  minDate:new Date(2009,0,1),
  maxDate:new Date(2014,11,31),
  value:new Date(2014,3,12),
  top:50,
  width: 300,
  useSpinner: true
});

win.add(picker);
win.open();

Attachments

File	Date	Size
Screenshot_2013-05-24-17-43-31.png	2013-05-24T16:12:27.000+0000	48189

Comments

Allen Yeung 2013-05-21
Hieu Pham 2013-05-22

Master PR: https://github.com/appcelerator/titanium_mobile/pull/4312
Davide Cassenti 2013-05-24

Re-opening the issue, as it is not working as expected. I noticed two problems: 1) the font size does not scale proportionally, and there is no way to change it 2) if I set the picker height, the spinner is not displayed well (see screenshot)
Guto Dasilva 2013-05-24

Also, you can't set the width if you set the type as Ti.UI.PICKER_TYPE_TIME
Ping Wang 2013-06-05

Already filed TIMOB-14007 for the font issue. Resolve this ticket as Fixed.
Chatis 2013-06-12

I have the same problem with a date picker that is very small in a large screen.. How can I fix that ?
Hieu Pham 2013-07-24

backport PR: https://github.com/appcelerator/titanium_mobile/pull/4479
Chatis 2013-07-24

Thank you for your response.. But I don't understand what I can do with that ?? Thank you..
Ping Wang 2013-07-24

Chatis, if you meant the size of the date picker is small, then this PR will fix that. Now you can specify width of the date picker to make it bigger. If you meant the text font size in the date picker is small, there has been already a ticket TIMOB-14007 for that.
Chatis 2013-07-25

No I meant the size of the Datepicker... But What I have to do with the PR to fix my problem ??? You told me you fixed that.. ok but how I could resolve that in my application ??? Thank you
Chatis 2013-07-30

Please, help me.... I really don't know what I have to do now..
Guto Dasilva 2013-07-30

[~chatis] if you increase the fontSize of the spinner the size will increase accordingly. Also you can set the width and height of a datepicker when you are using useSpinner = true. Ti.UI.backgroundColor = 'white'; var win = Ti.UI.createWindow({ exitOnClose: true, layout: 'vertical' }); var picker = Ti.UI.createPicker({ type:Ti.UI.PICKER_TYPE_DATE, minDate:new Date(2009,0,1), maxDate:new Date(2014,11,31), value:new Date(2014,3,12), top:50, width: 300, useSpinner: true }); win.add(picker); win.open(); look at this ticket: http://support.appcelerator.com/tickets/APP-844764
Eric Merriman 2013-08-09

[~chatis] Regarding the PR (Pull request), it was integrated into the 3_1_X branch of our SDK, and so that particular fix is in any 3.1.2 build made after the PR was merged. To get the SDK, you can access the 3_1_X branch builds of the SDK via: http://builds.appcelerator.com.s3.amazonaws.com/index.html#3_1_X Alternatively you can use the titanium CLI from command-line (assuming you have it installed) by using "ti sdk install -b 3_1_X" also adding the "-d" flag will set this SDK as the one you wish to set as the default for build commands. We do not recommend going live with your application using pre-release builds, but you can for sure use the SDK to verify the fix that will come out with 3.1.2 GA.
Chatis 2013-08-12

Thank you this is working with 3.1.2 but not with 3.1.1 I'll wait for the stable version
Olga Romero 2013-08-14

Tested above code and verified fix with: Appcelerator Studio: , build: 3.1.2.201308091728 Titanium SDK, build: 3.1.2.v20130814124556 CLI: 3.1.2-alpha Alloy: 1.2.0-alpha6 Device: Nexus4 Android version 4.3 GalaxyS3 Android version 4.0.4
Mauro Parra-Miranda 2014-07-31

Tested with the testcase with: Mobile SDK 3.3.0.GA Device: Moto X Android Version 4.4.2. This is still happening. Maybe a regression? Or my device with "hd" screen?

Mauro Parra-Miranda 2014-07-31

I can't modify previous comment. Environment: Mobile SDK 3.3.0.GA Device: Moto X Android Version 4.4.2. Testcase:

    Ti.UI.backgroundColor = 'white';
    var win = Ti.UI.createWindow({
      exitOnClose: true,
      layout: 'vertical'
    });
     
    var picker = Ti.UI.createPicker({
      type:Ti.UI.PICKER_TYPE_DATE,
      //type:Ti.UI.PICKER_TYPE_TIME,
      minDate:new Date(2009,0,1),
      maxDate:new Date(2014,11,31),
      value:new Date(2014,3,12),
      top:50,
      width: Ti.UI.FILL,
      useSpinner: true,
    });
     
    win.add(picker);
    win.open();

Extra info We tested either with TYPE_DATE & TYPE_TIME.

Mauro Parra-Miranda 2014-07-31

If you set the font, it will look just fine. Check the testcase:

    Ti.UI.backgroundColor = 'white';
    var win = Ti.UI.createWindow({
      exitOnClose: true,
      layout: 'vertical'
    });
     
    var picker = Ti.UI.createPicker({
      type:Ti.UI.PICKER_TYPE_DATE,
      //type:Ti.UI.PICKER_TYPE_TIME,
      minDate:new Date(2009,0,1),
      maxDate:new Date(2014,11,31),
      value:new Date(2014,3,12),
      font: {
      	fontWeight: 'bold',
      	fontSize:32,
      	},
      top:50,
      width: Ti.UI.FILL,
      useSpinner: true,
    });
     
    win.add(picker);
    win.open();

jay splaine 2015-10-19

~pwang, ~btran, ~rtorres - Can we re-open this? It was never fixed. Just try it on a very high resolution device, like the Nexus 9. It's way too small. For some resolutions, using the font property helps, but it tends to make the picker columns uneven and very ugly. Running 3.5.1.GA - here's an image that shows it without setting a font property: http://imgur.com/S51WoRk !http://imgur.com/S51WoRk! Running 3.5.1.GA still - here's what it looks like when you do attempt to make it larger via the font property. http://imgur.com/wZ3ZBuw !http://imgur.com/wZ3ZBuw!
jay splaine 2015-10-19

[~pwang], [~btran], [~rtlechuga], [~hpham] - Can we re-open this and test it against larger resolution android devices? Note my post just above this one. If you click on the image links, it shows how unacceptably small AND visibly uneven the picker is on higher res devices. Tweaking the 'font' property makes it bigger, but the columns are uneven.. It's hard for our customers to see what they're selecting because the bar is not exactly over selected values in each column. Running 3.5.1.GA... While we also see issues on some smaller resolutions, Here's what it looks like with the font turned up for a Nexus 9: http://imgur.com/wZ3ZBuw And on the Nexus 9 without using the font property: http://imgur.com/S51WoRk It has to be tested on large resolution devices (which are more and more common in the mobile market, many of our customers have written to us complaining). Thanks and feel free to reach out directly to me if you would like to work together on this issue (james.splaine@onforce.com).

JSON Source