As of now, setting the width to Ti.UI.SIZE or a fixed value has no effect when the picker first renders.
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?
Picker width should get adjusted upon item selection.
https://github.com/appcelerator/titanium_mobile_windows/pull/1056
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)[~kiguchi] Master is merged waiting for 6_2_X.
Merged to 6_2_X. [PR1062](https://github.com/appcelerator/titanium_mobile_windows/pull/1062).
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
[~eharris] Thanks for the info, I will take a look.