-
Notifications
You must be signed in to change notification settings - Fork 24.5k
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
Setting flex:1 on a ScrollView contentContainerStyle causes overlapping of components #4099
Comments
Try deleting |
@david-a Did you ever get a chance to try @tyliuty suggestion? |
@christopherdro I have also been trying this for a while, previously I relied on the minHeight style that was removed in a later version. I also want the same layout as @david-a (the inner view to stretch to fill if it doesn't, but otherwise continue scrolling); removing the |
contentContainerStyle work for me! yeah! |
I don't think that's possible right now using stylesheet. One thing you might try is getting the height of the scrollview and the inner element, and toggle the styles when inner element is bigger. |
Closing this since the original issue is the expected behaviour. Please file a feature request on Product Pains if you want |
Cool @joelcloralt ! thanks, I'll try that! |
I had the similar problem and I solved it using
Thanks |
This problem is similar to what I had. See my answer here: http://stackoverflow.com/a/43912470/3867175 |
use |
Thank you so much @tanguyantoine!! you saved my day!! |
@sarahmarciano You are welcome but why ? |
Oh sorry for my mistake @tanguyantoine ! I meant @tushar-singh :) |
This works for me. Thank you ! |
@tushar-singh Worked like a charm! Thanks 👍 |
@tushar-singh Worked like charm! 👍 Thanks. Have been dealing with this for quiet a long time now! |
@tushar-singh excellence, Thanks |
@tushar-singh even in my case flexGrow:1 is working, But how come flex:1 is not working which is nothing but short form of flexGrow:1,flexShrink:1,flexBasis:0. Any one explain this pls. |
Hello guys, |
@ravirajn22 in React Native, flex does not work in the same way as CSS, according to its docs: https://facebook.github.io/react-native/docs/layout-props.html |
@ravirajn22 Also, on browsers, when you set only flex-grow: 1, you actually get flex-grow:1, flex-shrink:1, flex-basis:auto, since default value of flex-shrink is 1 and default value of flex-basis is auto |
@dungle1811 , did you find an answer? i am also facing the same issue yet... if you found an answer tell it to me also.. |
@tushar-singh Worked like charm! 👍 Thank you very much!!! |
if |
@vinicri which of the container has to have the flewGrow ? The scrollView only? Or the inner containers too ? |
Solution as discussed above: |
Use |
@dungle1811 I am facing the same issue. Please provide any solution for this |
flexGrow: 1 is not working anymore? |
@rendomnet this is working for me: |
In case your ScrollView is wrapped within a View, make sure your View has
|
I have a ScrollView with 2 subviews and I want the first of them (lets call it ViewA) to have {flex: 1} so the other one (ViewB) will stick to the bottom of the screen - but only if their total height is smaller that the screen. Of course that if they are higher than the screen I want it to scroll as usual.
So I set the ScrollView's
style
ANDcontentContainerStyle
to beflex: 1
. I Also set ViewA'sstyle
toflex:1
. But when I do it, the ScrollView's contentContainer view is fixed to the screen height, thus not able to scroll if needed and even worse - ViewB overlaps ViewA.If it's a bug - how to fix it?
If it's the expected behaviour - how can I achieve what I've described?
here's a little demonstration: https://rnplay.org/apps/wZgtWA
Note that even without ViewB, once you set flex:1 on contentContainerStyle you can't scroll the page.
Thanks.
The text was updated successfully, but these errors were encountered: