[Android] position: absolute shouldn't be cut off within a container with border

[linmic]

Description

If you have an element position: absolute with negative offset within a container with a border, it's going to be cut off, it's like overflow: hidden of the container is suddenly enabled by the border. But if you remove the border of the container, it works well. This issue only happens on Android.

#3198 is a similar issue, and was reported with lots of discussions. However, I believe they are not exactly the same.

Reproduction

I've made an example on rnplay to reproduce the issue.

Solution

TBD

Additional Information

• React Native version: 0.33 (rnplay), 0.39 (the version I currently use)
• Platform: Android
• Operating System: MacOS

[jakallergis]

Same here. This is really frustrating

[kylanhurt]

Yeah this is currently happening with me even when the containing view has no border nor border-radius. This is definitely an issue because, for example, I want to show a circular icon on the top + middle area of my modal window. You can see it getting cut off below:

[renso3x]

Any solution for this issue? I have also experience it on android development.

[olliekav]

I can't find any way around this, guess we are just stuck with different styling for Android.

[jinqiupeter]

Same issue here, view with absolute positioning and negative top works on iOS but got cut off on Android

[scriptfans]

• 1 for this, how to fix it?

[brunolemos]

Facing this as well :(

Works great on iOS:

[aforty]

This is an issue for me as well.

[brunolemos]

@grabbou @bvaughn know any android dev that could help us with this bug?

[yelkamel]

If some have a solution for that it's should be great. My java android skill is not good enough to make a PR :(

[Maximell]

+1 also having this issue.

[felipap]

Has been a big problem here too. Anybody found a fix?

[chrispcode]

Also having this problem with Android, neither overflow: hidden, nor zIndex: 1000 seem to fix the problem!

[mtin79]

Same here. Needs a fix! What are you doing to positioning elements in relationship to another one? E.g. for tooltips etc.?

[designorant]

Workaround

Use an extra container and fake the overflow with it: https://snack.expo.io/@designorant/overflow-visible-android-workaround

import React, { Component } from "react";
import { View, Text, StyleSheet } from "react-native";

export default class App extends Component {
  render() {
    return (
      <View style={styles.mainContainer}>

        <View style={styles.componentContainer}>
          <View style={[styles.element, styles.element1]} />
          <Text style={styles.text}>overflow: "visible"</Text>
        </View>

        <View style={styles.extraComponentContainer}>
          <View style={[styles.element, styles.element2]} />
          <View style={styles.componentContainer}>
            <Text style={styles.text}>extra container workaround</Text>
          </View>
        </View>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  mainContainer: {
    flex: 1,
    alignItems: "center",
    justifyContent: "space-around"
  },
  componentContainer: {
    backgroundColor: "#d3d3d3",
    borderWidth: 1,
    borderColor: "grey",
    width: 200,
    height: 200,
    position: "relative",
    overflow: "visible" // doesn't do anything
  },
  extraComponentContainer: {
    // fakes overflow but requires more markup
    backgroundColor: "#ffff00",
    paddingTop: 20,
    paddingLeft: 20,
    paddingBottom: 20,
    paddingRight: 20,
    position: "relative"
  },
  element: {
    backgroundColor: "#ff0000",
    width: 40,
    height: 40
  },
  element1: {
    position: "absolute",
    top: -20,
    left: -20
  },
  element2: {
    position: "absolute",
    top: 0,
    left: 0,
    zIndex: 100,
    elevation: 100
  },
  text: {
    textAlign: "right",
    backgroundColor: "transparent"
  }
});

[mtin79]

@designorant Thanks Michal for your advice! One question remains: Wouldn't the "extraComponentContainer" prevent clicks/actions/events to elements/components below it?

I know in css there is "pointer-events". When its set to "none" (e.g. pointer-events: none; ) The elements lets all events pass through to other elements below it. Anything like that in react-native?

[brunolemos]

Yes, react native has the pointerEvents prop.

[stefanedberg]

I have this problem too in rn 0.51.0.

[kyoyadmoon]

after some testing, it also happened when container has these styles

• backgroundColor
• borderColor
• zIndex

[MorganIsBatman]

Thank you @brunolemos !! I had so much stupid layouts to try and get this to work. A full page 'container' View with pointerEvents='none' was all I needed!

[jpudysz]

@brunolemos thanks! We did manage to fix out issue with poitnerEvents="box-none" and position absolute

[shettayyy]

      <View style={ styles.container }>
        <TouchableOpacity style={ styles.menuButton } onPress={ this.toggleMenu }>
          <Ionicons name="ios-menu" size={ 32 } color="#fff" />
        </TouchableOpacity>

        <Text style={ styles.headerTitle }>VERUS</Text>

        <View style={ styles.menu } pointerEvents="box-none">
          <Fade visible={ this.state.menuVisible }>
            { menuItems.map( this.renderMenuitem ) }
          </Fade>
        </View>
      </View>

import EStyleSheet from 'react-native-extended-stylesheet';

const styles = EStyleSheet.create( {
  $headerHeight: 50,

  container: {
    flexDirection: 'row',
    alignItems: 'center',
    // backgroundColor: '#0050aa',
    paddingHorizontal: 10,
    height: '$headerHeight',
    position: 'relative',
  },

  menuButton: {
    marginTop: 3,
  },

  headerTitle: {
    marginLeft: 10,
    color: '#fff',
    fontSize: 16,
    fontWeight: '700',
  },

  menu: {
    position: 'absolute',
    top: '$headerHeight',
    left: 10,
  },

  menuItem: {
    padding: 10,
    backgroundColor: '#0050aa',
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },

  menuItemName: {
    color: '#fff',
    fontWeight: '700',
  },
} );

export default styles;

I am still facing this issue. If I do not add backgroundColor to the container, then it works perfectly fine. It only happens on Android.

[ifours]

To overcome this issue you can render a absolute positioned view with your background color on Android. Following code will work on android :)

      <View style={{ flex: 1, backgroundColor: 'red' }}>
        <View style={{ height: 200, backgroundColor: 'green' }} />
        <View style={{ height: 200 }}>
          <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'yellow' }} />
          <View style={{ height: 50, width: 50, backgroundColor: 'aqua', position: 'absolute', top: -20 }} />
        </View>
      </View>

[salujaharkirat]

I was working on an order summary page in which I need to show all orders made by user. Facing similar issue on android. Tried workaround @designorant suggested and it works fine. Here is the sample code if it helps anyone :) https://snack.expo.io/@harkiratsaluja/timeline

[shettayyy]

Did anyone find a fix? This issue still exists. I am trying to create a hamburger menu (vertical dropdown) and the container with menu items gets clipped inside the header rendered by react-navigation. This only happens on Android.

[sibelius]

check if this helps https://medium.com/@sibelius/solving-view-overflow-in-android-reactnative-f961752a75cd

[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. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[gianpaj]

the issue hasn't yet been fixed. @stale don't close the issue

[jianjiade]

I am still facing this issue.

[scottwio]

Still an issue 😭