Dropdown button clipped in small containers?

[mkh]

Is there a way to prevent a Dropdown Button component from being clipped in small containers? See screenshot example. I'm trying to create a contextual menu using a ••• button, which is a pretty common UI element these days, but the dropdown menu gets clipped to the size of the container it's in, making it useless here. Is there a better way to do this? Or is this a bug with the component?

[dcartlidge]

Long standing issue I'm afraid Victoria had some ingenious workaround suggestions though:

Make the dropdown/navigation menu width expand to fit contents

Trying to use a dropdown menu as an action menu alongside a text field. Works fine, expect that the width of the menu, when displayed, is only as wide as the button element that triggered it. Seems to be the same for navigation elements too. Make it small, turns into a hamburger, resulting menu is cropped to the same width as the icon - all the text is lost. An option to choose if the menu should crop to the size of the component or the contents would be great. [cropped_menu]

[MicExpert]

In the Appearance section, the 'Min list width' option is available, but it doesn't appear to function properly. bug ? Known issue

[victoria]

Definitely a bug I bumped this in our queue, so we'll see if we can push a fix soon!

[victoria]

@mkh - good news! We pushed a fix for this Are you still seeing any clipping?

[mkh]

Great news!! What version? We're on self-hosted so we'll need to do an upgrade here soon.

[dcartlidge]

Seems to be an issue if you align the button...

[victoria]

@mkh - asking now!

@dcartlidge Helpful - thank you. Passed that along

[victoria]

Good news bad news—seems like the aligning causing clipping is actually a different bug

I filed it and linked it to this thread internally.

[stewart.anstey]

I still can't replicate the solution by @dcartlidge (changing the alignment of the dropdown to default). I tried all alightments.

Is there something else I can check?

[Jack_T]

Hello @stewart.anstey!

Are you looking to implement behavior on the dropdown of a visual look?

If so what are you aiming to achieve?

[stewart.anstey]

Hi @Jack_T,

Thanks for getting back to me.

I'm trying to get the drop down action text to widen to fit the names/text of all the actions included. But I don't want to widen the button itself as this prevents placing other UI components next to it.

I can appreciate how it is more practical for you to have the drop down action text fit the width of the visible button (in terms of html flex-box etc).

Bad: How it looks currently (one unit width and cropped text)

Better: How it looks when the button is two units wide

Best: How it should look (typical for most frameworks)

Regards,

[mckenna]

Hi @stewart.anstey! Have you tried the "Min list width" control for this? It allows you to control the width of the dropdown menu without affecting the button width, which I think will accomplish what you're looking for

[stewart.anstey]

Thanks @mckenna that's exactly the solution!

That property has been around since Dec 2022 but I guess I haven't needed it before.