Forum Moderators: not2easy

Message Too Old, No Replies

bootstrap dropdown minimum width

1 vs. 2 columns

         

smallcompany

8:38 pm on Dec 4, 2015 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I created a dropdown with two columns. Now I wonder why 1 column gets expanded if links are longer while 2 column does not behave that way. For the two column I had to increase the minimum width. Otherwise, links from the second column would overlap with those form the column 1.
Except the minimum width change and left and right columns width, the rest of CSS intervention was mostly for the look purpose, not the layout (just added >li>ul> to replicate original bootstrap styling).

Why the 2 columns does not expand based on the link text length? The default 1 column dropdown does it. Did I miss something in my custom CSS (some li or ul setting)?

Thanks

HTML
<ul class="dropdown-menu dropdown-2c" role="menu">
<li>
<ul class="list-unstyled left">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
<ul class="list-unstyled right">
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li>
</ul>


Custom CSS
.dropdown-2c{min-width:270px}
.left{float:left;width:55%}
.right{float:left;width:45%}
.dropdown-menu>li>ul>li>a{display:block;padding:3px 20px;clear:both;font-weight:400;line-height:1.42857143;color:#333;white-space:nowrap}
.dropdown-menu>li>ul>li>a:focus,.dropdown-menu>li>ul>li>a:hover{color:#262626;text-decoration:none;background-color:#f5f5f5}
@media (max-width:767px){.navbar-inverse .navbar-nav .open .dropdown-menu>li>ul>li>a{color:#9D9D9D}}


P.S.
CSS
.dropdown-menu>.active>a,.dropdown-menu>.active>a:focus,.dropdown-menu>.active>a:hover{color:#fff;text-decoration:none;background-color:#337ab7;outline:0}

This active (blue background) for dropdown does not work with two columns. I'm pretty sure it's on the javascript side, but not sure which part I should look into.

not2easy

9:08 pm on Dec 4, 2015 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



I suspect the overlap is caused by using the float property where the content is wider than the assigned width of the element. I don't see what the class="left" and class="right" are applied to in the example, so I can't be certain that it contributes, but if it is assigned to the containers for the main content and the sidebar container, that would overlap in the case of nowrap content wider than the container. If the anchor text is too long to fit in the max-width, it will overflow the container because of the "nowrap" property.

lucy24

10:25 pm on Dec 4, 2015 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I think there's a lot of stuff under
blahblah>ul>li>a
that would work better as
blahblah>ul>li
or even
blahblah>ul
alone. Things like "display: block" (or for that matter "display:" anything) are only meaningful if there are two or more of them in the same place.

smallcompany

10:27 pm on Dec 4, 2015 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



assigned width

Assigned width is by percentage, that's what "left" and "right" are for, applied to ULs in HTML.

The float property is used in Bootstrap's native CSS for the one column dropdown.

All works fine now, but I wish the link text length is what determines the width of each of the two columns.

BTW, I fixed the active part. It was CSS only, nothing about javascript.