0

I have a dropdown menu inside all items in FlatList However, the menu from the last item will cut off by the FlatList container.

After debugging on Chrome, I found that adding overflow: 'visible' to FlatList's div works. But I have no way to override it. I tried 

<FlatList
  ...others
  contentContainerStyle={{ overflow: 'visible' }}
/>

and 

<FlatList
  ...others
  style={{ backgroundColor: 'red', overflow: 'visible' }}
/>

but none of it work.

Here's what I see in Chrome inspector

<div> // style changes backgroundColor here, but ignoring overflow
  <div /> // contentContainerStyle changes this div
</div>

Heres my code:

  <FlatList
    ref='flatList'
    data={data}
    extraData={someData}
    keyExtractor={item => item.id.toString()}
    renderItem={this.renderItem}
    CellRendererComponent={({ children, index, style, ...props }) => {
      return (
        <View style={[style, { zIndex: data.length - index }]} index={index} {...props}>
          {children}
        </View>
      )
    }}
    style={{ overflow: 'visible', backgroundColor: 'red' }}
    enableEmptySections
  />
Brian Law
  • 460
  • 1
  • 4
  • 18
  • Can you post your complete code, I have two questions here, 1. Are you using react or react-native 2. If React-native you should be using View rather than div. – Yogaraj Saravanan Jun 22 '18 at 11:06
  • 1. I am using react-native-web, which allows me to use my react-native code in react 2. The `div` I post is something i see in Chrome inspector, updated the question – Brian Law Jun 22 '18 at 11:20

0 Answers0