Skip to content
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

Positioning View above a parent #7229

Closed
pedro opened this issue Apr 26, 2016 · 9 comments
Closed

Positioning View above a parent #7229

pedro opened this issue Apr 26, 2016 · 9 comments

Comments

@pedro
Copy link

@pedro pedro commented Apr 26, 2016

Hey folks,

We're trying to position a View above its parent using a negative top. iOS renders it the way I'd expect:

screen shot 2016-04-26 at 12 14 14 am

But Android is trimming the view to match the parent:

screen shot 2016-04-26 at 12 14 16 am

Code:

class RNPositionBug extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.box}>
          <View style={styles.inner}/>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  box: {
    width: 200,
    height: 200,
    backgroundColor: 'red',
  },
  inner: {
    position: 'relative',
    top: -50,
    width: 100,
    height: 100,
    backgroundColor: 'blue',
  }
});

Tested in React-Native 0.24.1, OSX. Tried to use both absolute and relative positioning on the inner view.

Any ideas/pointers are appreciated, thanks!

@ashleydw
Copy link

@ashleydw ashleydw commented Apr 26, 2016

What about overflow: 'visible' on the outer Views ?

@kohver
Copy link

@kohver kohver commented Apr 26, 2016

@grabbou
Copy link
Collaborator

@grabbou grabbou commented Apr 26, 2016

@facebook-github-bot
Copy link

@facebook-github-bot facebook-github-bot commented Apr 26, 2016

Closing this issue as @grabbou says the question asked has been answered. Please help us by asking questions on StackOverflow. StackOverflow is amazing for Q&A: it has a reputation system, voting, the ability to mark a question as answered. Because of the reputation system it is likely the community will see and answer your question there. This also helps us use the GitHub bug tracker for bugs only.

@pedro
Copy link
Author

@pedro pedro commented Apr 26, 2016

oops, thank you!

@conor909
Copy link

@conor909 conor909 commented Nov 16, 2017

@grabbou whats the answer?

@JCMais
Copy link

@JCMais JCMais commented Nov 23, 2017

The answer is that it doesn't works. And is one of the main pain points of react native apps on Android.

@grabbou
Copy link
Collaborator

@grabbou grabbou commented Nov 27, 2017

Here is the answer: #7229 (comment).

Basically, overflow doesn't work on Android. Anything that you try to put outside of its parent (negative margin, negative absolute position) will be cropped.

@JCMais
Copy link

@JCMais JCMais commented Nov 27, 2017

See this issue about a possible solution #16951

@facebook facebook locked as resolved and limited conversation to collaborators May 24, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
8 participants