Welcome to WebmasterWorld Guest from 34.237.76.249

Forum Moderators: not2easy

Message Too Old, No Replies

bootstrap dropdown minimum width

1 vs. 2 columns

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 2, 2006
posts:2240
votes: 8


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.
9:08 pm on Dec 4, 2015 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4391
votes: 310


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.
10:25 pm on Dec 4, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15752
votes: 825


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.
10:27 pm on Dec 4, 2015 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 2, 2006
posts:2240
votes: 8


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.