Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-20518] iOS: Picker is not being shown with width: Ti.UI.FILL

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2016-03-11T00:45:16.000+0000
Affected Version/sRelease 5.2.0
Fix Version/sn/a
ComponentsiOS
Labelsios
ReporterInaki Abete
AssigneeAngel Petkov
Created2016-03-03T19:36:08.000+0000
Updated2018-08-06T17:57:37.000+0000

Description

Problem

Picker with width: Ti.UI.FILL is not being shown.

Test case

Using almost the same code as in KitchenSink (https://github.com/appcelerator/KitchenSink/blob/stable/Resources%2Fui%2Fcommon%2Fcontrols%2Fpicker_basic.js):
    var win = Ti.UI.createWindow({
        width: Ti.UI.FILL,
        title:'title'
    });
    win.backgroundColor = 'black';

    var picker = Ti.UI.createPicker({
        width: Ti.UI.FILL
    });

    if (Ti.Platform.osname === 'tizen') {
        // On Mobile Web/Tizen, by default, the picker fills the entire view it is contained,
        // unless the size is provided.
        picker.width = 100;
        picker.height = 110;
        picker.color = '#fc0';
    }

    var column = Ti.UI.createPickerColumn();
    column.addRow(Ti.UI.createPickerRow({title:'Bananas',custom_item:'b'}));
    column.addRow(Ti.UI.createPickerRow({title:'Strawberries',custom_item:'s'}));
    column.addRow(Ti.UI.createPickerRow({title:'Mangos',custom_item:'m'}));
    column.addRow(Ti.UI.createPickerRow({title:'Grapes',custom_item:'g'}));

    picker.add(column);

    // turn on the selection indicator (off by default)
    picker.selectionIndicator = true;

    win.add(picker);

    var label = Ti.UI.createLabel({
        text:'Make a move',
        top:10,
        width:'auto',
        height:'auto',
        textAlign:'center',
        color:'white'
    });
    win.add(label);


    picker.addEventListener('change',function(e)
    {
        Ti.API.info("You selected row: "+e.row+", column: "+e.column+", custom_item: "+e.row.custom_item);
        label.text = "row index: "+e.rowIndex+", column index: "+e.columnIndex;
    });
    win.open();

Expected result:

!Simulator Screen Shot 3 mar 2016 4.38.50 p.m..png|thumbnail!

Actual result:

!Simulator Screen Shot 3 mar 2016 4.21.14 p.m..png|thumbnail!

Attachments

FileDateSize
Simulator Screen Shot 3 mar 2016 4.21.14 p.m..png2016-03-03T19:29:21.000+000025751
Simulator Screen Shot 3 mar 2016 4.22.01 p.m..png2016-03-03T19:29:20.000+000045341
Simulator Screen Shot 3 mar 2016 4.38.50 p.m..png2016-03-03T19:39:13.000+000038240

Comments

  1. Angel Petkov 2016-03-11

    PR : https://github.com/appcelerator/titanium_mobile/pull/7827. Demo code
         var win = Ti.UI.createWindow({
               width: Ti.UI.FILL,
               title:'title'
           });
           win.backgroundColor = 'black';
        
           var picker = Ti.UI.createPicker({
               width: Ti.UI.FILL,
               height:700
           });
        
           if (Ti.Platform.osname === 'tizen') {
               // On Mobile Web/Tizen, by default, the picker fills the entire view it is contained,
               // unless the size is provided.
               picker.width = 100;
               picker.height = 110;
               picker.color = '#fc0';
           }
        
           var column = Ti.UI.createPickerColumn();
           column.addRow(Ti.UI.createPickerRow({title:'Bananas',custom_item:'b'}));
           column.addRow(Ti.UI.createPickerRow({title:'Strawberries',custom_item:'s'}));
           column.addRow(Ti.UI.createPickerRow({title:'Mangos',custom_item:'m'}));
           column.addRow(Ti.UI.createPickerRow({title:'Grapes',custom_item:'g'}));
        
           picker.add(column);
        
           // turn on the selection indicator (off by default)
           picker.selectionIndicator = true;
        
           win.add(picker);
        
           var label = Ti.UI.createLabel({
               text:'Make a move',
               top:10,
               width:'auto',
               height:'auto',
               textAlign:'center',
               color:'white'
           });
           win.add(label);
        
        
           picker.addEventListener('change',function(e)
           {
               Ti.API.info("You selected row: "+e.row+", column: "+e.column+", custom_item: "+e.row.custom_item);
               label.text = "row index: "+e.rowIndex+", column index: "+e.columnIndex;
           });
           win.open();
       
  2. ankur garha 2016-07-21

    Hi Team, I'm still able to reproduce this issue on Ti SDK 5.3.0 GA. Can any please recheck it again?
  3. Angel Petkov 2016-07-21

    [~speedyankur@gmail.com] HI, could you please try it with 5.4.0 using the code provided by the ticket creator, the picker width is sized properly for me like [so](http://imgur.com/a/6nCnL).
  4. Eric Merriman 2018-08-06

    Cleaning up older fixed tickets from 2016 and earlier. If this ticket should not have been closed, please reopen it.

JSON Source