List displaying behind other components

[sinclas]

Hi,

I have this component on a form with components directly under it. Is there a way I can set the list to display above the other component below it? It's currently displaying behind it. Do I set the list container's ZIndex?

Thanks! Steve

[deepslam]

Same issue

[mitesh-db]

Hey Guys, Wrap your <AutocompleteInput> with a <View> and provide some good zIndex to your <View>, If this does not work. Try defining you list inside flatListProps={{}} Let me know if it does not work!

[indapublic]

Same for me but I used a Android trick from manual.

//...

render() {
  return(
    <View>
      <View style={styles.autocompleteContainer}>
        <Autocomplete {/* your props */} />
      </View>
      <View>
        <Text>Some content</Text>
      </View>
    </View>
  );
}

//...

const styles = StyleSheet.create({
  autocompleteContainer: {
    flex: 1,
    left: 0,
    position: 'absolute',
    right: 0,
    top: 0,
    zIndex: 1
  }
});

It means that iOS doesn't support overflows too? Probably this style should be implemented on component level?

[erdong-fe]

The problem of zIndex

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. Thank you for your contributions.

[melissa07]

I have the same issue right now on IOS, and even when playing with the zIndex it does not work for me.

[MrSiby]

Same issue with the suggestions list appearing behind any element below it. I've tried setting z-index on everything I could but the problem remains.

Any attempt to select a suggestion will pass through to the element it's overlapping.

Edit: I've managed to get it working by setting the element below it to a negative z-index too.

[cs-manughian]

Works @indapublic! Just need to look out for any styles set on parent Views that may be interfering.

[abhijitkumar360]

guys don't take tension . I have use listStyle={{position:'relative'}} inside Autocomplete.

[SamanthaChia]

I used listContainerStyle and simply added z-index in there if the result list ends up behind other components! :) hope it helps

[Stophface]

Yep, this is a huge problem!

[W1nstar]

On Android, my problem seems to be the fact that the dropdown doesn't overflow the container view of the Autocomplete component. Even when absolute, it doesn't show, you can only see half the dropdown. Setting it to relative isn't a possibility in my project, so I'm still looking for a solution. zIndex does nothing, elevation doesn't seem to work on suggestionsListContainer nor any other component.

Any suggestion would be appreciated!

[cs-manughian]

On Android, my problem seems to be the fact that the dropdown doesn't overflow the container view of the Autocomplete component. Even when absolute, it doesn't show, you can only see half the dropdown. Setting it to relative isn't a possibility in my project, so I'm still looking for a solution. zIndex does nothing, elevation doesn't seem to work on suggestionsListContainer nor any other component.

Any suggestion would be appreciated!

@W1nstar The solution here worked for me, on both platforms, but it really depends on the styling on your parent component. Could it be interfering? I'd try it out on an empty screen to see if it works, then one by one can add your parent styles. Let me know if that helps, or possibly post a code snippet.

[Jean-Kenned]

My workaround to this problem was wrapper the components just bellow the input with a View with negative zIndex:zIndex: -1. This worked both in IOS and Android.

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

[ApluUalberta]

This is still a huge issue. Though we can manipulate the display over other elements using position: "absolute" and zIndex, this could affect styling principles across an application. This needs to be fixed.

[Dsalvat596]

Still a problem. I have to display the autocomplete input in a modal. The listItems appear behind the modal. Please fix.