Search code examples
androidiosappceleratorappcelerator-titaniumpicker

Appcelerator PIcker Sizing & Hint Text Problems


Ok, designing forms in Appcelerator Alloy is driving me a little crazy over here. :) I'm using the latest build with the latest SDK on a Mac. Below are screenshots of the same exact form on both platforms. The form is using the same basic Picker markup with the same .tss styles: width: 45% & height: 40.

ANDROID PROBLEMS: Android Form

  1. Date Picker is unusable. Normal pickers work beautifully. As soon as it's set to a date type however, you get that weirdness.

IOS 9.3 PROBLEMS: iOS Form

  1. None of the picker types respect the width setting. Height is fine as every form element has the same height setting and they display uniformly. I have also tried applying a width attribute to the sole pickerColumn without success.

  2. Hint text and picker text are both black. iOS doesn't let you adjust the hint text color from what I understand. However, when the app initially loads it loads with a white background. If I could somehow get Alloy to load with a black screen (or dark theme) instead, I suspect this issue would be fixed. Tss styling has no effect on the background text from what I can tell since the page is already loaded at the time which the styling is applied.

Thanks in advance for any insight. Hopefully it's not a bug.

EDIT: Here's the code. It was so basic that I originally omitted it.

<Alloy>
    <Window class="container">
        <View>
            <Picker id="gender" selectionIndicator="true">
                <PickerColumn id="genderPick">
                    <PickerRow title="Gender"/>
                    <PickerRow title="Male"/>
                    <PickerRow title="Female"/>
                </PickerColumn>
            </Picker>

            <Picker id="birthday" type="Ti.UI.PICKER_TYPE_DATE" />
        </View>
    </Window>
</Alloy>

STYLE:

"Picker": {
    width: "45%",
    height: 40,
    backgroundColor: "#222",
    color: "#fff"
}

"PickerColumn": {
    width: "100%",
    height: 40,
    backgroundColor: "#222",
    color: "#fff"
}

Solution

  • After much back and forth, it has been discovered as a bug. Percentage widths do not work for pickers on iOS even though width is supposed to be settable. I submitted it as a bug in the Jira system so this case is closed until they fix it. :(