Option list not displaying correctly

[alexprice1]

[alexprice1]

Time and Time are both dropdowns, but their "active" status is being hidden under other items.

[alexprice1]

Also placement seems off on android

[agrass]

Same problem. someone started working in one workaround for this?

[alexprice1]

@agrass I had commented in this issue pertaining to this dropdown issue:

facebook/react-native#698

It appears that this cannot be achieved with the current implementation of react-native. I did have an idea of adding a component at the very end of my component hierarchy, and just moving that based off of what selector is pressed, but this seems like overkill. I'm still in development and hoping the issue is fixed before Alpha.

[purnomoeko]

@alexprice91
I made pull request for this see 1064cee

actually it's just easy step, just add background colour to the items.js file. and the you have to make sure the Options List in the root tag.

See my example:

<ScrollView>
   <View>
          <Text style={styles.labelText} >Attendance Type</Text>
          <Select
            style={{width: 500}}
            width={500}
            ref="selectType"
            optionListRef={this._getOptionList.bind(this)}
            defaultValue="Select Type..."
            onSelect={this._change.bind(this)}
            >
            <Option>Roll Call</Option>
            <Option>Boys Awake</Option>
            <Option>Led Player</Option>
            <Option>Out For Mass</Option>
            <Option>Attendance</Option>
          </Select>

          <Text style={styles.labelText}>Time </Text>
          <DatePickerIOS
            date={this.state.date}
            mode="time"
            timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60}
            minuteInterval={30}
            onDateChange={this.onDateChange}
          />

     </View>
     <OptionList style={{backgroundColor:'#fff'}} ref="optionType"/>
</ScrollView>

[agrass]

Great @purnomoeko , I'm going to test your workaround.

someone already solved the bad placement problem (to the right) in Android?

[alexprice1]

@purnomoeko ah great. I am on vacation until tomorrow. I will look it tomorrow. Thanks!

[alexprice1]

@purnomoeko I tried and this did not fix my problem. @agrass I cannot remember how I got it to work, but the android problem no longer seems to be there.

[acresta88]

Changing the background color of the items container works as @purnomoeko said

To change the single item background works as well, here a screenshot to show it:

I added a margin of 2 there (the white lines) that actually creates the same problem.

So the main problem there is the padding (in addition to the transparent background of the container), the one in the method:

const renderedItems = React.Children.map(items, (item) => { ... }

that creates the gap, maybe it should be set as a property? and not have any default padding/margin set. Maybe it should be the same for the items' background colours?

I think the best would be to have as properties:
container background color,
item background color,
paddings/margins for items.

And have default value for the colours (maybe just a white background) and padding/margin set to 0.

[agrass]

Great, the other problem of the second image of @alexprice91 (bad placement problem to the right) it's fixed removing this styles that use the examplejustifyContent: 'center', alignItems: 'center' in the main view and changing it for padding or margin.

[alexprice1]

Yeah, but I am still seeing an issue with content rendered bellow the list, being placed above the list. (Image 1). I think (Image 2) is just a styling mishap on my end.