Log in to AnswerLog in to Follow
UserImage.jpg
joab bitencourt
33Views
7Comments
Solved
How to expand dropdown search inside a table
Question
Reactive
CSS
OutSystems UI
Development
Application Type
Reactive

Hello, i need a help to expand a dropdown inside a table.

I have a dropdown inside a table and the dropdown have a lot of information then i need expand the width of the options without desconfiguring the table.

drop donw .png

0
0
13 Apr

Hello there are two way

1) used the width to expand as per dropdown options (I have attached OML and Demo link for this )
2) used CSS and set overflow-x -scroll so it will overflow ( add same class as below in that add class overflow=scroll and width as per your requirement)

For 1 scenario : DEMO Link


Note :If you want apply to all DD then

 .choices__list.choices__list--dropdown {
    border-radius: var(--border-radius-soft);
    width: 600px; //(give as per your requirement)
}

and if you want to apply for 1 on the list then wrap that in the container and extend that class as I done in the OML

hope this will helps you,

Thanks and Regards,

Akshay Deshpande

See solution in context
1
0
14 Apr

Hi Akshay,


Thank you for the reply, the solution helps me alot.

0
0
18 Apr
.choices__list.choices__list--dropdown  { 
    border-radius: var(--border-radius-soft);
    overflow-x: scroll;
}

the first solution was well but the second no, that was i set for the second solution, i made something wrong?

0
0
18 Apr

Hi Joab,

Can you please share the Module (OML file) here?

Thanks

--RJ--

1
0
14 Apr

Hi Rahul

Thanks for the reply. I cant share the Module oml because mi company not allow to do that.

0
0
18 Apr

Hey @joab bitencourt ,

I think better way to create on extension css class and add that class to your dropdown,
class must content width as you expected.

Hope this will help you.

Thanks

Yogesh

1
0
14 Apr

Hi Yogesh,

thanks for the reply. I tried this but I wasn't sure what class to add just the list


0
0
18 Apr

Hello there are two way

1) used the width to expand as per dropdown options (I have attached OML and Demo link for this )
2) used CSS and set overflow-x -scroll so it will overflow ( add same class as below in that add class overflow=scroll and width as per your requirement)

For 1 scenario : DEMO Link


Note :If you want apply to all DD then

 .choices__list.choices__list--dropdown {
    border-radius: var(--border-radius-soft);
    width: 600px; //(give as per your requirement)
}

and if you want to apply for 1 on the list then wrap that in the container and extend that class as I done in the OML

hope this will helps you,

Thanks and Regards,

Akshay Deshpande

1
0
14 Apr

Hi Akshay,


Thank you for the reply, the solution helps me alot.

0
0
18 Apr
.choices__list.choices__list--dropdown  { 
    border-radius: var(--border-radius-soft);
    overflow-x: scroll;
}

the first solution was well but the second no, that was i set for the second solution, i made something wrong?

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