MenuButton width of dropdown portion

Panel
1

Is there a way to set the width of the dropdown portion that appears when a MenuButton is clicked, independent of the width of the button? Right now, if I have a button labeled something short like “File”, and a longer word(s) in the dropdown like “Preferences”, the longer word is cut off.

I’ve got sizing_mode='fixed' because I want the button itself to be just the width of the word “File”, but this seems to limit the dropdown to the same width as well.

1 Like
2

You can probably do it via stylesheets argument. Try posting a minimum, reproducible example below. That makes it easier for the community to try to help find the right css for the stylesheets parameter.

3

Thanks for the tip! With that I was actually able to figure it out.

A simple example of the problem I was having:

import panel as pn

pn.extension()

button = pn.widgets.MenuButton(
    name="File",
    sizing_mode="fixed",
    items=["New", "Open", "Open example dataset", "Save", "Save as", "Preferences"],
)

button.servable()

In this example, the dropdown menu will only be the width of the button, which isn’t long enough for some of the menu items.

I was able to fix it with the following:

import panel as pn

pn.extension()

menubutton_stylesheet = """
.bk-menu {
    width: max-content;
    min-width: 100%;
}
"""

button = pn.widgets.MenuButton(
    name="File",
    sizing_mode="fixed",
    items=["New", "Open", "Open example dataset", "Save", "Save as", "Preferences"],
    stylesheets=[menubutton_stylesheet],
)

button.servable()

Now the dropdown is the width of the longest item, and at least the width of the button.