Hi all,
I know it's a CSS problem, but I would like to ask how to let the combo box that can set overflow-y: visible but still have the overflow-x: scroll on the table.
Attached are the oml file and the screenshot I would like to achieve.
Thank you.
The goal that I want to achieve
Hi Kay ,
You will have to make a slight change in the implementation, i.e. remove the highlighted wrapped container to the Table widget with the 'overflow-x-scroll' style class, which is the cause of the issue.
See this sample screen: DropdownSearchInsideTableDemo
Refer to the attached updated .oml file
I hope this helps you!
Kind regards,
Benjith Sam
Yeah, Benjith Sam, I saw that too, but I don't know if Kay wants to continue to use that, that is the problem, that class is breaking his implementation, and I don't know a way to continue to use that even if he wants after this reply.
Márcio
Hi,
Yes, I want to keep the css 'overflow-x-scroll' in the div. So I am wondering if there is any solution that I still can use the overflow-x-scroll class and make the y axis visible when overflowing.
Hi Kay,
For the mentioned use case, I do have a workaround implementation to suggest. See this sample screen: DropdownSearchInsideTableDemo
CSS Snippet:
.overflow-x-scroll { overflow-x: scroll; } .dropdownSelect__custom.choices { position: absolute; top: -20px; } .dropdownSelect__wrapper { position: absolute; }
Refer to the attached updated .oml file.
Hi Benjith,
First of all, thank you for solving my problem so quickly. But I still have one question. Because I added some css at my table tag, when I scroll the table, the dropdown would also move. Is there a way to fix this?
Thank you again.
Attached is the updated oml that I was talking about.
I'm unable to reproduce the mentioned case. For me, it is working fine, even though I included the table style definition. See this sample screen: DropdownSearchInsideTableDemo
Let me know if I misunderstood it.
https://personal-vknq.outsystemscloud.com/tab/Entry1.aspx?_ts=637632455075333085
This is the demo page that I referred to. So when I scrolled the table to the right, the dropdowns also changed the position. Attached is the problem that I am working on.
Thank you again for the help!
You need to set max-height first for dropdown. it will auto find space at top or bottom side for showing dropdown list.
.choices__list.choices__list--dropdown { max-height: 110px;}
Hi, I have the same problem with the horizontal scroll bar. Its a reactive app, OS 11.
Inside the table, I have a dropdown, and when I open it, it goes behind the scroll bar
If I apply the CSS mentioned above, When I use the
dropdownSelect__wrapper (position absolute) (see above). Then it goes outside the scroll bar, which is fine, but it losses its place.
So the current CSS that I have are:
.dropdownSelect__wrapper { position: absolute;}
.overflow-x-scroll { overflow-x: scroll;}
.dropdownSelect__custom.choices {
position: absolute; border-radius: var(--border-radius-soft); width: 600px; max-height: 210px;}
What can I do to make the dropdown be at the same level as it was before but still have the feature of seeing all the list?
Thank you