Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

Change height of the Picker.

Im using the picker but I can't figure out how to change the height of the Picker. https://developer.appcelerator.com/apidoc/mobile/1.1/Titanium.UI.createPicker seems to throw an error so I cant see the api's for it.

var picker = Ti.UI.createPicker({
height: 50
});

I tried that but nothing changes, even tho the 'top' property works fine.. someone help please!

— asked March 25th 2010 by Sj Singh
0 Comments

12 Answers

  • I was experimenting to get this to work, and found a way to get the picker to resize. The following transform trick works.

    var transformPicker = Titanium.UI.create2DMatrix().scale(0.5);
    var picker = Ti.UI.createPicker({
        backgroundColor: '#ff9900',
        top: 0,
        heigth: 10,
        width: 80,
        transform:transformPicker
    });
    
    — answered October 13th 2010 by Mihir Mange
    permalink
    2 Comments
    • This works alright! I couldnt get the width to work, so I set the width I wanted as you have above (only 300 instead of 80) and did a scale(1.0) and now my pickers are all uniform width :)

      — commented July 13th 2011 by Steve Hovey
    • Great. This is what I'm looking for! Thanks!

      — commented November 22nd 2011 by Toshiya TSURU
  • Try to wrap it in a view with a fixed height.

    — answered March 25th 2010 by Jeff Haynie
    permalink
    0 Comments
  • Found it!
    Heavy workaround but gets the result!

    var view = Titanium.UI.createView({
        height:'auto',
        width:'auto',
        right:pWidth*__0.2__
    })
    
    var rightSize = false;
    var i = 0.1;
    while(!rightSize){
        pWidth/i<=__300__ ? rightSize = true : i=i+0.01;
    }
    
    var transformPicker = Titanium.UI.create2DMatrix().scale(i);
    
    var picker = Titanium.UI.createPicker({
        top:pHeight*0.25,
        useSpinner:true,
        type:Titanium.UI.PICKER_TYPE_TIME,
        value:value,
        minuteInterval:15,
        transform:transformPicker
    });
    view.add(picker);
    

    Now you can experiment with the value 300 in line 10. To me 300 is a nice size, but you might want to have you picker bigger, so adjust the 300 to 200 or if you want it smaller you can adjust it to 400 and so forth.

    In line 4 you can adjust the value 0.2. If you want the picker to be more left on the screen adjust the 0.2 to 0.3. If you want it more right on the screen adjust 0.2 to 0.1 and so forth.

    — answered November 13th 2011 by Aurelius Lie
    permalink
    0 Comments
  • It's not. Not even natively.

    — answered August 18th 2010 by Sj Singh
    permalink
    0 Comments
  • I was experimenting to get this to work, and found a way to get the picker to resize. The following transform trick works.

    var transformPicker = Titanium.UI.create2DMatrix().scale(0.5);
    var picker = Ti.UI.createPicker({
        backgroundColor: '#ff9900',
        top: 0,
        heigth: 10,
        width: 80,
        transform:transformPicker
    });
    
    — answered October 13th 2010 by Mihir Mange
    permalink
    0 Comments
  • Jeff, thanks for the response!

    var view = Titanium.UI.createView({
       backgroundColor:'red',
       top: 50,
       width: 200,
       height:150
    });
    view.add(picker);
    win.add(view);
    

    I tried that. The width seem to work fine but height is not. The picker seem to move out of the view and move toward the top for some reason?

    — answered March 25th 2010 by Sj Singh
    permalink
    0 Comments
  • is this a bug or is there just no way to do it??

    — answered March 27th 2010 by Sj Singh
    permalink
    0 Comments
  • I'm having the same problem, any ideas?

    — answered March 27th 2010 by David Brown
    permalink
    0 Comments
  • I would also like to set the height of the picker, and the previous suggestions didn't work for me either. Is there still no way to do this?

    — answered August 18th 2010 by Mike Dosey
    permalink
    0 Comments
  • I'm having the same problem, any ideas?

    — answered March 27th 2010 by David Brown
    permalink
    0 Comments
  • I was experimenting to get this to work, and found a way to get the picker to resize. The following transform trick works.

    var transformPicker = Titanium.UI.create2DMatrix().scale(0.5);
    var picker = Ti.UI.createPicker({
        backgroundColor: '#ff9900',
        top: 0,
        heigth: 10,
        width: 80,
        transform:transformPicker
    });
    
    — answered October 13th 2010 by Mihir Mange
    permalink
    0 Comments
  • Found a good workaround if you want the picker to adjust it's size according to the device/displaysize you running the app on.

    var rightSize = false;
    var i = 0.1;
    while(!rightSize){
        pWidth/i<=300 ? rightSize = true : i=i+0.01;
    }
    
    var transformPicker = Titanium.UI.create2DMatrix().scale(i);
    
    var picker = Titanium.UI.createPicker({
        top:pHeight*0.25,
        useSpinner:true,
        type:Titanium.UI.PICKER_TYPE_TIME,
        value:value,
        minuteInterval:15,
        transform:transformPicker
    });
    

    Now you can experiment with the value 300 in line 4.
    To me 300 is a nice size, but you might want to have you picker bigger, so adjust the 300 to 200 or if you want it smaller you can adjust it to 400 and so forth.

    However I still got the problem that the picker is not centered in the view.

    — answered November 13th 2011 by Aurelius Lie
    permalink
    0 Comments
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.