0

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"
}
B.T.
  • 41
  • 7

4 Answers4

0

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

Community
  • 1
  • 1
John Dalsgaard
  • 2,797
  • 1
  • 14
  • 26
  • The issue with the dialog, is that it's not cross platform. Need the solution to work for both iOS and Android since they are both wonky. The android date picker functions properly, but the visibility is the issue as you can see from the screen shot. In fact, all the base code functions properly. They just display like crap as they appear to be complete ignoring the TSS styling on iOS, and the Android picker is just... scrunched? – B.T. May 18 '16 at 16:42
0

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.

Community
  • 1
  • 1
miga
  • 3,997
  • 13
  • 45
0

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

Community
  • 1
  • 1
gjerlow
  • 89
  • 6
0

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

B.T.
  • 41
  • 7