Dropdown content not taking the full width of the trigger

[raviteja83]

Are there any limitations for the width the dropdown content can take? The content is not taking the full width of trigger. Anything that can be done? I have set no width constraint on the dropdown content.

[benoitgrelard]

Hi @raviteja83,

There are no "limitations", but no constraints either.
The content width will simply be the natural width, so it will depend on the width of your larger item, paddings, etc, like a regular element.

If you wanted to make them match, you could either do it with css, by applying the same width to the trigger and the content, or dynamically by not applying a specific width to the trigger, but rather measuring it and applying that measured width to the content.

Hope this helps.

✌️

[raviteja83]

Thanks for the quick response. i am trying the same but the alignment of the menu is off. Am I missing anything? Might be positioning is not happening with respect to root or trigger.

[benoitgrelard]

Looks like you are hitting #781 so you might not be able to do it this way at the moment unfortunately.

Btw, I just realised that you are using the wrong component for your use-case.
You should be using Select as opposed to DropdownMenu.
DropdownMenu is to be used for a menu of actions, not to maintain a selected value, it is not the right semantic for it.

Select will also have the behaviour you are after in terms of the matching size, or at least closer I think.

[raviteja83]

The actual idea was to use select itself but because of #1247 I had to try to do with dropdown.

[benoitgrelard]

Yeah, the positioning is a limitation at the moment, that being said, by using the wrong component, you are using the wrong semantic, making it worse accessibility-wise, as opposed to something that is correct semantically, accessible but looks slightly different to what you want (for now).

[raviteja83]

#781 helped me for now. Thanks for the quick response. Great work on the library. Thank you very much.