Menu titles are forced to multiple lines. I want 1 long title

Thanks @Jerry . I see that now, before I read it as adding that custom class to the menu, which I previously tried without success. Got it to work now. Only design flaw with this solution is that even menus with shorter titles gets a dropdown menu of the same width as the specificed minimum.

You could solve this by creating different classes for the .dropdown-menu.
As example, create a class “.large .dropdown-menu” (keep spaces) and set width to 300px.
Then add the class .large to the button group. This way you can create different widths for different dropdown menus.

1 Like

That’s great, thanks @Jerry ! :slight_smile:

@mFo maybe you’re not hopping on your left foot when you do it :crazy_face:

The width on the drop down has a min value set, it auto expands to fit the content by default.

By the way, if you want to line up the nested drop down option just add a class called px-0 which removes the horizontal padding around the nested dropdown.

Screen Shot 2022-01-11 at 6.57.50 AM

Thanks @PeteSharp, but for some reason my menu didn’t auto expand but instead cut the items to multiple lines. It works fine with the solution that you posted above, which @Jerry pointed me back to :slight_smile:

@mFo both my solutions :rofl:

Strange though. I even used a new project. So unless you have some other styling happening here it doesn’t make much sense.

Haha sorry, I see that now :rofl:! I don’t know what caused it to be cut, but I didn’t want to start from scratch and this worked :slight_smile: