Mixing overflow-y and overflow-x
Hey team,
I have a certain problem with forms and overflows
Imagine having the following structure
form
form-group
label + input + tooltip
label + input + tooltip
label + input + tooltip
....
On the form element, there is an overflow-y: auto, because it can have various length, and base on the length I would like to show a scroll bar or not (only on the y axis)
I have the tooltips for a row, which are clickable. When I click to the tooltip, it should show a box, like popup with some text.
Unfortunately, the overflow-y makes it buggy, because half of the popup is hdden and a horizontal scrollbar pops up.
I tried to put overflow-x: visible everywhere, but while I have the overflow-y on form, it does not matter for it.
Can someone help me out here?
14 Replies
please make a small codepen example in which we can see your structure and so we have a place where we can try things without having to set it up ourselfs
sorry for replying this late @MarkBoots
https://github.com/Bloodika/scroll-test
I couldn't have done it on codepen, please see the repository
GitHub
GitHub - Bloodika/scroll-test
Contribute to Bloodika/scroll-test development by creating an account on GitHub.
Iirc if you have an overflow value on one axis, the other axis has to have that value too. So if you have
overflow-x: scroll then overflow-y has to be scroll. That's just part of the spec. Does that answer your question?wellll, kinda yes. It mean I can never achieve what I wouldl ike to :D right?
To be completely honest, my brain is too exhausted to try to figure out exactly what you're trying to achieve 😂 I kind of just read you were trying to mix 2 different overflow values and let you know how the spec works from my knowledge
let me quickly show you the problem, it would be easire :D
First screenshot shows the test application
Second screenshot shows when I click to the tooltip
Third screenshot shows that I need to scroll on the x-axis to see the tooltip itself.
It is a form which I'm using for searching. There can be a lot of input text, so there is an overflow-y: auto on the form itself
my only problem is that the tooltip disappears behind the other element beacuse of the overflow-y: auto
Why not absolutely position the tooltip?
You probably don't want it in the normal document flow
Put a
position: relative on the tooltip button, and then position: absolute on the tooltip message itself (and you'll need to add some other properties, like top/bottom/left/righthmmmm, I'll try, thank you so much.
I'm not an expert on css unfortunately, if you have some really good articles/training mats, I would appreciate those :D
I know you said you can't do it on codepen, but it would be easy for me to show you if you can get it working there
But I recommend just searching up something like "position absolute mdn" and clicking the MDN docs link and reading there. It's pretty straightforward
unfortunately it uses a 3rd party component library called @carbon/react
I couldn't manage to set up a codepen environment for that
Not able to help you much then unfortunately
You could set up the demo on codesandbox - it'll let you pull in your dependencies there