CODEWITHSUNDEEP
androidiosappceleratorappcelerator-titaniumpicker
B.T.
B.T.

Reputation: 41

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"
}

Upvotes: 0

Views: 635

Answers (4)

B.T.
B.T.

Reputation: 41

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. :(

Upvotes: 0

gjerlow
gjerlow

Reputation: 89

It's not easy to find a solution to your problems without any code samples. However, reading the Appcelerator Documentation might come helpful:

Note: you can only set the columns property for the plain picker. If you set the type property to anything else except Titanium.UI.PICKER_TYPE_PLAIN, you cannot modify the picker's columns.

It may look like a picker of the type DATE_AND_TIME or DATE doesn't have the same possibilities of customization as the PLAIN type.

Regarding your hintText problem, Appcelerator are adding hintTextColor for iOS on their next release. Until then, I prefer AttibutedStrings/AttributedHintText as a workaround. For an example of how to use this, please have a look at how to change hintText color in Titanium

Upvotes: 0

miga
miga

Reputation: 4055

For the hintText color please refer to: how to change hintText color in textField Titanium? You can either use a SearchBar, AttributedString/AttributedHintText (which should be the better option) or create view with a textfield and a label.

Upvotes: 0

John Dalsgaard
John Dalsgaard

Reputation: 2807

I had some issues with date/time pickers. Not exactly the same as you have (without having seen your code). However, I solved it by using the dialog instead. Perhaps this will also work for you?

You may also refer to my question with sample code.

/John

Upvotes: 0

Related Questions