Titanium JIRA Archive
Appcelerator Community (AC)

[AC-384] iOS: Custom Picker renders off-screen and wont position correctly when inside TableView/ScrollView/ListView

GitHub Issuen/a
TypeBug
Priorityn/a
StatusResolved
ResolutionNeeds more info
Resolution Date2015-11-14T01:04:05.000+0000
Affected Version/sn/a
Fix Version/sn/a
ComponentsTitanium SDK & CLI
Labelsios, picker, sdk
ReporterKeith
AssigneeShak Hossain
Created2015-09-26T14:57:46.000+0000
Updated2015-11-14T01:04:05.000+0000

Description

Custom Pickers (using Titanium.UI.PICKER_TYPE_PLAIN) appear to be rendering slightly off-screen (to the left) when placed inside a tableview, scrollview or listview and are not following set left/center/right positioning. Date pickers appear unaffected. Keeping pickers inline is currently a recommended UI guideline from Apple (at least for date pickers...): https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/Controls.html ("As much as possible, display a date picker inline with the content.") Quick alloy code example:
<Alloy>
    <Window id="index" backgroundColor="#FFF">
        
        <TableView>
        	<TableViewRow height="220">
		        <Picker id="picker" top="0" left="0" selectionIndicator="true" width="Ti.UI.FILL" useSpinner="true">
		            <PickerColumn id="column1">
		                <PickerRow title="Bananas"/>
		                <PickerRow title="Strawberries"/>
		                <PickerRow title="Mangos"/>
		                <PickerRow title="Grapes"/>
		            </PickerColumn>
		        </Picker>
        	</TableViewRow>
        	<TableViewRow height="220">
		        <Picker id="picker2" top="0" left="0" selectionIndicator="true" width="Ti.UI.FILL" type="Ti.UI.PICKER_TYPE_DATE" useSpinner="true">
		        </Picker>
        	</TableViewRow>
        </TableView>
    </Window>
</Alloy>

Attachments

FileDateSize
Simulator Screen Shot 27 Sep 2015 12.47.11 am.png2015-09-26T14:52:18.000+000072904

Comments

  1. Harish Mridha 2015-09-27

    Hi , If you set the type property to anything else except Titanium.UI.PICKER_TYPE_PLAIN, you cannot modify the picker's columns. Please take a look on this [Note](http://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.Picker) Thanks

JSON Source