hossein-zare / react-native-dropdown-picker

A single / multiple, categorizable, customizable, localizable and searchable item picker (drop-down) component for react native which supports both Android & iOS.
https://hossein-zare.github.io/react-native-dropdown-picker-website/
MIT License
992 stars 296 forks source link

When Dropdown opens, dropdown container not taking z index, its not on the top of the below view #562

Open sagarkbluebenz opened 2 years ago

sagarkbluebenz commented 2 years ago

Dropdown container forcing below content go down when opens dropdown. not able to apply z index

pedrogs97 commented 2 years ago

Try this:

<View style={{ zIndex: 100 }}>
   <DropDownPicker {...} />
</View>
carlossalasamper commented 2 years ago

I have the same issue here

image
lucasuracosta commented 2 years ago

Same for me. It happens only when the dropdown opens to the bottom

lucasuracosta commented 2 years ago

Try this:

<View style={{ zIndex: 100 }}>
   <DropDownPicker {...} />
</View>

¡This worked for me!

kongshu612 commented 2 years ago

Hi there,

            <TouchableOpacity style={_style} onPress={__onPress} onLayout={__onLayout} {...props} ref={onRef} pointerEvents={pointerEvents} disabled={disabled} testID={testID}>
                {_BodyComponent}
                {_ArrowComponent}
            </TouchableOpacity>
            {DropDownBodyComponent}
        </View>

Is it reasonable that we only apply the ZIndex to the DropDownBodyComponent?

challme28 commented 2 years ago

<View style={{ zIndex: 100 }}> <DropDownPicker {...} />

This hasn't work for me either

devioand-aj commented 2 years ago

I fixed this problem from https://github.com/hossein-zare/react-native-dropdown-picker/issues/450#issuecomment-976497649

challme28 commented 2 years ago

Understanding the following helped me achieve the desired out in React Native The way React Native zIndex hierarchy works is as follows:

<ComponentA>
  <Children1 zIndex={99}/>
  <Children2/>
<ComponentA/>
<ComponentB>
  <Children3/>
  <Children4 zIndex={9}/>
<ComponentB/>

Children1 will always render below Children3 and Children4. Children4 is able to render on top of Children3. Should Children3 have a Child with a zIndex equal to 999, it would still render below Children4.

durgesh94 commented 1 year ago

Try this:

<View style={{ zIndex: 100 }}>
   <DropDownPicker {...} />
</View>

If trying this, on android devices the list is not scrolling, working fine on iOS devices.

Linh-Vo commented 1 year ago

still didn't work on IOS

sharived commented 4 months ago

I'm still having this issue. If the dropDownDirection is Bottom then no matter where I set my zIndex it's always behind my other inputs. If I set it to Top it works fine. Very frustrating....