Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-25033] Windows: Ability to manipulate Ti.UI.Picker's width

GitHub Issuen/a
TypeBug
PriorityMedium
StatusClosed
ResolutionFixed
Resolution Date2017-08-07T17:22:39.000+0000
Affected Version/sRelease 6.1.1
Fix Version/sRelease 6.2.0
ComponentsWindows
Labelsn/a
ReporterNeeraj Mishra
AssigneeKota Iguchi
Created2017-07-27T20:31:27.000+0000
Updated2017-08-24T13:48:26.000+0000

Description

Problem Description:

As of now, setting the width to Ti.UI.SIZE or a fixed value has no effect when the picker first renders.

Sample code:

var words = ['Bananas', 'Strawberries', 'Mangos', 'Electrocardiographically',
'October', 'November', 'September', 'Wednesday', 'Trinitrophenylmethylnitramine',
'Humor', 'Weekday', 'Balloon', 'Ornament', 'Strange', 'Disestablishmentarianism',
'Aeroplane', 'Aeroplane', 'Chess board', 'Floodlight', 'Rocket', 'Space Shuttle',
'Thermometer', ' Umbrella', 'Water', 'Tunnel', 'Treadmill', 'Lips', 'Brush',
'Subconstellation', 'Typewriter', 'Room', 'Money', 'Hieroglyph', 'Flower', 'Monument',
'Egg', 'Explosive', 'Family', 'Festival', 'Gloves', 'Horoscope', 'Kaleidoscope',
'Microscope', 'Pendulum', 'Restaurant', 'Apples', 'Cycle', 'Miraculousness',
'Overprovocation', 'Kyphoscoliotic', 'Disillusionizing', 'Prince'];

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

// Add TiClassic picker - 1 column, width = Ti.UI.SIZE, height = Ti.UI.SIZE, backgroundColor = #d83636
var classicPicker = Ti.UI.createPicker({
    top: 20,
    left: 0,
    height: Ti.UI.SIZE,
    width: Ti.UI.SIZE,
    backgroundColor: '#554e4e'
});

var classicPickerRows = [];
for (var i = 0; i < words.length; i++) {
    var wordIndex = Math.round(Math.random() * 50);
    classicPickerRows[i] = Ti.UI.createPickerRow({
        title: words[wordIndex]
    });
}
classicPicker.add(classicPickerRows);

win.add(classicPicker);

// Add TiClassic picker - 1 column, width = 350, height = Ti.UI.SIZE, backgroundColor = #EDEDED
var classicPicker2 = Ti.UI.createPicker({
    top: 200,
    left: 0,
    height: Ti.UI.SIZE,
    width: 350,
    backgroundColor: '#554e4e'
});

var classicPickerRows2 = [];
for (var i = 0; i < words.length; i++) {
    var wordIndex = Math.round(Math.random() * 50);
    classicPickerRows2[i] = Ti.UI.createPickerRow({
        title: words[wordIndex]
    });
}
classicPicker2.add(classicPickerRows2);

win.add(classicPicker2);
win.open();
In this sample, observe how there are two pickers declared. Observe that the PickerRows will most likely populate with very long words. Run this app (can be deployed with -T ws-local) and observe the behavior of both pickers. As shown in the code, classicPicker has a width set to Ti.UI.SIZE, but when rendered in the app and selecting a very long option, the picker width won't adjust. Additionally, classicPicker2 whose width is 350 seems to be rendered in a 350 width View (judging by the backgroundColor) but the actual picker width is NOT 350. For this picker, the size adjusts well when selecting a very long option though. So, is it possible to implement to actually fix the width? And, if set to Ti.UI.SIZE, it adjusts depending on the size of the selected option?

Expected Result:

Picker width should get adjusted upon item selection.

Comments

  1. Kota Iguchi 2017-08-01

    https://github.com/appcelerator/titanium_mobile_windows/pull/1056
  2. Kota Iguchi 2017-08-01

    On Windows UWP, platform component (we use [ComboBox](https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.combobox)) is not got adjusted based on the content size. So it sounds normal to have Ti.UI.SIZE not adjust picker's size. On the other hand, setting number value to width should adjust picker's width. I pushed a PR for it: [titanium_mobile_windows/pull/1056](https://github.com/appcelerator/titanium_mobile_windows/pull/1056)
  3. Samir Mohammed 2017-08-04

    [~kiguchi] Master is merged waiting for 6_2_X.
  4. Kota Iguchi 2017-08-05

    Merged to 6_2_X. [PR1062](https://github.com/appcelerator/titanium_mobile_windows/pull/1062).
  5. Samir Mohammed 2017-08-09

    Verified fix in SDK Version: 7.0.0.v20170808071205 and SDK Version: 6.2.0.v20170808012225. Test and other information can be found at: Master: https://github.com/appcelerator/titanium_mobile_windows/pull/1056 6_2_X: https://github.com/appcelerator/titanium_mobile_windows/pull/1062
  6. Kota Iguchi 2017-08-24

    [~eharris] Thanks for the info, I will take a look.

JSON Source