Cannot make max-width work with Bootstrap dropdown

Question

I have a Bootstrap dropdown menu. The menu items can be quite large in some cases. So I need to set a max-width. In addition, I don't want the menu items to be cut so I must use white-space: normal too. The problem is that my max-width is completely ignored. If I set width instead it does work. But I do not want that as I may have menus where the whole menu would fix in much less space than width. That's why I need max-width to work rather than width.

This JSFiddle illustrates the problem. As you can see, the menu items are not expanded up to 400px.

[UPDATE] Ok, I was clearly missing the position: relative. That fixes the menu of the first case which I tried to isolate as much as possible. My code actually relies on this Bootsnipp. In that example, position: relative breaks such a cascade submenu.

Any ideas how can then make such a cascade menu with my contrains?

Thanks a lot in advance

Answer 1

You just need to add the following:

  width: 100%
  max-width: 400px;

Your element needs a certain width so that max-width works

http://jsfiddle.net/dvwz5omq/1/

Answer 2

You have to change the value of the min-width property because it is set to 160px;

.dropdown-menu {
  max-width: 100px;
  min-width: 1%;
}

Answer 3

Just override the position: absolute; style from .dropdown-menu with position: relative;.

By default the dropmenu has been position absolute to its parent element. It will take the same width if given the style width: 100%. since it has some min-width which make it to exceed its parent width. Therefore we have to make the dropmenu independent of its parent element width.

I hope it will helps you