How to expand dropdown search inside a table
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

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

Hi Akshay,


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

.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?

Hi Joab,

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

Thanks

--RJ--

Hi Rahul

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

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

Hi Yogesh,

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


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

Hi Akshay,


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

.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?

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