Different Overflow-Settings for X and Y Axis

Ask us anything How do I?
1

Hey,
i would like to set up different overflow settings for X and Y Axis. I tried

overflow-x: auto;
overflow-y: visible;

in the Custom CSS Settings but it’s not working.

For additional Information: it’s a table that i would like to be horizontal scrollable on smaller screens, but within the table there is a Select Input Field. If i set the div to overflow auto, the horizontal scroll works fine, but when i open the Select Input, the div gets vertical scroll as well which is a bad UX in my example.

If I set the div to overflow:visible, the UX for the input select is how I would like it to be, its just on top of the following divs without increasing the size of the current div. But in this case the horizontal scroll is not working, so its not mobile responsive anymore.

I tried to work around this by using z-axis on the Select input but this does not solve the problem.

Any recommendations?

3

Hello @LukaVM,

Did you solve your problem ? I have the same…

4

Hello @David_BievreWeb, I did not. Actually i changed my Input field from a Select Input to a standard Input without Dropdown Options, so I don’t need a solution for this specific case anymore - but the overall problem still exists.

1 Like
5

@Joyce @Alexis Any ideas? :innocent:

How it looks closed (as it should):

SelectClosed
SelectClosed552×646 13.4 KB

How it looks opened: Input Select shall be on top of the parent div which is horizontal scrollable.

SelectOpened
SelectOpened560×610 24.7 KB

6

seems you have a z axis issue rather then a x and y issue here

7

Hi @sam1, thanks for the input.
Actually none of these elements have z-axis set to true, and even if i do so (on the Multiselect Input, the row or the full table) it does not change the described behaviour.
Any other ideas?