css overflow question
Question

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



tab.oml

mvp_badge
MVP

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

tab.oml

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.

Kind regards,

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.

mvp_badge
MVP

Hi Kay,

For the mentioned use case, I do have a workaround implementation to suggest. See this sample screen: DropdownSearchInsideTableDemo


  •  Refer to the highlighted elements in the widget tree structure and replicate the same in your actual code.

  • And also, define the below-mentioned CSS definition in the respective Screen Style Section.

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.

I hope this helps you!


Kind regards,

Benjith Sam

tab.oml

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.


tabupdated.oml

mvp_badge
MVP

Hi Kay,

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.


Kind regards,

Benjith Sam

https://personal-vknq.outsystemscloud.com/tab/Entry1.aspx?_ts=637632455075333085

Hi Benjith,

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!


Hi Kay,

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;}

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.