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.
@mFo maybe you’re not hopping on your left foot when you do it
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.
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
@mFo both my solutions
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 ! I don’t know what caused it to be cut, but I didn’t want to start from scratch and this worked