-
Notifications
You must be signed in to change notification settings - Fork 24.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Android] position: absolute shouldn't be cut off within a container with border #12534
Comments
Same here. This is really frustrating |
Any solution for this issue? I have also experience it on android development. |
I can't find any way around this, guess we are just stuck with different styling for Android. |
Same issue here, view with absolute positioning and negative |
|
This is an issue for me as well. |
If some have a solution for that it's should be great. |
+1 also having this issue. |
Has been a big problem here too. Anybody found a fix? |
Also having this problem with Android, neither |
Same here. Needs a fix! |
WorkaroundUse an extra container and fake the overflow with it: 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"
}
}); |
@designorant Thanks Michal for your advice! 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. |
Yes, react native has the |
I have this problem too in rn 0.51.0. |
after some testing, it also happened when container has these styles
|
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! |
@brunolemos thanks! We did manage to fix out issue with |
I am still facing this issue. If I do not add |
To overcome this issue you can render a absolute positioned view with your background color on Android. Following code will work on android :)
|
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. |
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. |
I don't think this should be closed yet :| |
I fix it setting a elevation together the position.
|
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 a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions. |
I don't think this should be closed yet. Tho there is a workaround with the elevation property. Unless it is not a workaround but the correct way of doing it which is not documented good enough. |
I resolved using react-native Modal as wrapper: |
can not find the reproducible example. |
Here reproducible example https://snack.expo.io/@fabrizio.bertoglio/overflow-visible-android-workaround I quote Is it a bad practice to use negative margins in Android? |
Actually what android does should not matter because react-native does not use any android layout system, they use flexbox implemented using yoga. |
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 a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions. |
Using StyleSheet from react-native and adding elevation key to the style props fixes the issue .. |
Try This Hope This works. Just play around the and Styles. Your content goes here );const styles = StyleSheet.create({ |
@fabriziobertoglio1987 does this count as negative margins? it's absolute positioning, not margin? And I can concur, negative margins will break your layouts across android devices in React Native, I've seen it happen in prod =) |
@iway1 as explained by @sibelius, It is caused by ViewGroup#setClipChildren Read more at https://medium.com/entria/solving-view-overflow-in-android-reactnative-f961752a75cd |
This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days. |
Still an issue |
This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days. |
Still an issue |
This issue does NOT reproduce on the react-native main branch. I quote the readme from https://github.com/entria/react-native-view-overflow (the package was published to fix this issue).
|
When I use react-native-linear-gradient element as father container, set negative top value doesn't work but use View as relative element works fine. <LinearGradient
colors={['#F8E2C4', '#F3BB6C']}
start={{x: 0, y: 0}}
end={{x: 1, y: -1}}
style={{
borderRadius: 20,
position: 'relative',
paddingVertical: 3.2 * vw,
paddingHorizontal: 5.33 * vw,
}}
>
<Text
style={{
fontSize: 4 * vw,
lineHeight: 4 * vw,
fontWeight: '500',
}}
>
{rightCardButtonText}
</Text>
{rightCardSubTitle && (
<LinearGradient
colors={['#F1933C', '#F13C3C']}
start={{x: -0.31, y: 0}}
end={{x: 0.95, y: 1}}
style={{
position: 'absolute',
top: '-28%',
right: 0,
borderTopLeftRadius: 16,
borderTopRightRadius: 20,
borderBottomRightRadius: 20,
borderBottomLeftRadius: 1,
paddingVertical: 0.53 * vw,
paddingHorizontal: 1.6 * vw,
}}
>
<Text
style={{
fontWeight: 'bold',
fontSize: 10,
fontFamily: 'ZHVipFont',
}}
>
{rightCardSubTitle}
</Text>
</LinearGradient>
)}
</LinearGradient> to <View
style={{
borderRadius: 20,
position: 'relative',
paddingVertical: 3.2 * vw,
paddingHorizontal: 5.33 * vw,
}}
>
<Text
style={{
fontSize: 4 * vw,
lineHeight: 4 * vw,
fontWeight: '500',
}}
>
{rightCardButtonText}
</Text>
{rightCardSubTitle && (
<LinearGradient
colors={['#F1933C', '#F13C3C']}
start={{x: -0.31, y: 0}}
end={{x: 0.95, y: 1}}
style={{
position: 'absolute',
top: '-28%',
right: 0,
borderTopLeftRadius: 16,
borderTopRightRadius: 20,
borderBottomRightRadius: 20,
borderBottomLeftRadius: 1,
paddingVertical: 0.53 * vw,
paddingHorizontal: 1.6 * vw,
}}
>
<Text
style={{
fontWeight: 'bold',
fontSize: 10,
fontFamily: 'ZHVipFont',
}}
>
{rightCardSubTitle}
</Text>
</LinearGradient>
)}
</View> it works. |
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 likeoverflow: 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
The text was updated successfully, but these errors were encountered: