Increasing the Dropdown list options width

[Shaagun_S]

Is there a way to increase the perspective dropdown list options width and not the component itself ? or is there any ignition versions where this is allowed ?

[Priyanka.Khandge]

create property under dropdownOptionStyle for width and height.

For more info, I have added a screen shot.

[justinedwards.jle]

I'm having no luck with this for the width adjustment; the dropdown stays the same size. If I make the pixels smaller, the text is cut off, but if I make it wider, I get a horizontal scrollbar. Am I missing something?

[pascal.fragnoud]

I played with this a few days ago, the built-in style property was pretty much useless for this.
I think you need to target .ia_dropdown__optionsModal. And maybe add an ! important flag.

[Shaagun_S]

I just wanted to increase the dropdown list menu width and not the dropdown component

[pascal.fragnoud]

The dropdownOptionStyle applies to the text, not the container. That's why you're seeing this.

[Daniel_Patterson]

I am looking at doing this as well. I want to recreate a table component with dropdowns in certain cells, so I’m restricted on the width of the component, but this means the options aren’t very legible:

current behavior:

Desired behavior:

[Matthew.gaitan]

To apply it to all dropdowns in your project, add this to your stylesheet.css

.ia_dropdown__optionsModal {
	width: auto !important;
}

to apply it to specific dropdowns within your project add this to your stylesheet.css

.ia_dropdown__optionsModal:has(.psc-Dropdown-AutoSizeOptionsModal) {
	width: auto !important;
}

then add Dropdown-AutoSizeOptionsModal to dropdownOptionsStyle.classes of the dropdown you wish to expand

Credit to this post for helping me figure out how to apply it to a specific dropdown and not all dropdowns

Color change on a label

You can not apply css injections inside the properties, this only works in styleclasses. I think this is what you want .psc-smartsheetsdropdowns .ia_dropdown__valuePill{ background-color:red; } .ia_dropdown__optionsModal:has(.psc-smartsheetsdropdowns){ background-color:red; } to be put in the stylesheet.css

[Daniel_Patterson]

@Matthew.gaitan

.ia_dropdown__optionsModal:has(.psc-Dropdown-AutoSizeOptionsModal) {
	width: auto !important;
}

If I could mark this post as the solution I would. Thank you very much for your quick response!