CODEWITHSUNDEEP
htmlcssdrop-down-menubootstrap-4
jolly-green-giant
jolly-green-giant

Reputation: 43

Bootstrap 4 dropdown - automatic width sizing?

Since Bootstrap 4 auto columns can adapt to whatever width is needed to fill a row, I thought I'd use it to populate a dropdown menu that may have 1 or 2 columns depending on user location.

The problem is the dropdown width does not expand to accommodate more than 1 column. When I add the second column it simply displays under the first, and if I change the class from "col" to "col-6" they display side by side but the contents of the columns overlap.

Setting an explicit width for the menu isn't an option since if I make it wide enough for 2 columns it will be unnecessarily wide when only 1 column is displayed.

How can I achieve a dropdown menu that will adapt to the width of it's contents, and to the width needed for another column when present?

Demo of the problem: https://www.bootply.com/VH5uvew6eQ

Upvotes: 1

Views: 1429

Answers (1)

tao
tao

Reputation: 90058

The whole Bootstrap grid system is predicated on the idea that the parent of a .row has a determined width (typically provided by a .container or .container-fluid) and .row helps you divide that width.

It is designed to constrain/stretch column contents, not to accommodate the auto width of its columns, so that it provides your layout with some sense of order. Indeed, v4 is more flexible than previous versions, as it allows you to divide the space with a certain amount of flexibility (using flexbox) but, still, within the confines of its provided size.

If you don't need that, don't use the grid system for your particular element. Only use it where it makes sense.

In your case, adding a double class to the dropdowns you want enlarged and overriding Bootstrap's .dropdown-menu: min-width: 10rem with your own 

.dropdown-menu.double { min-width: 20rem; }

and perhaps adding no-gutters class to your rows might be a step forward towards your goal.

Do note your layout has multiple duplicated ids which are invalid HTML.

Upvotes: 1

Related Questions