CODEWITHSUNDEEP
htmlcsscss-float
mario595
mario595

Reputation: 3761

Position inside float element

I've made a custom dropdown, here is the HTML:

<div class='dropdown'>
    <div class='dropdownTitle'>Sort by<span class='select_arrow'></span></div>
    <ul class='selectPanel'>
        <li><input  type='checkbox' id='allProducts'><label for='allProducts'>Name</label></li>
        <li><input  type='checkbox' id='Enterprise'><label for='Enterprise'>Date</label></li>
        <li><input  type='checkbox' id='Security'><label for='Security'>Popularity</label></li>
        <li><input  type='checkbox' id='Data'><label for='Data'>Rating</label></li>
    </ul>
</div>

This is working fine in the most cases, but, if I float the dropdown, the element inside don't show as I would expected: the width of the panel don't grow when the labels are bigger. I've made a jsfiddle.

Can anybody explain to me why this is happening, and how to solve?

Thanks!

Upvotes: 2

Views: 152

Answers (3)

Pevara
Pevara

Reputation: 14310

You can solve this by adding white-space: nowrap to your li. Something like this:

.dropdown>ul>li {
    margin : 0;
    padding : 0;
    padding : 0 8px;
    display : block;
    white-space: nowrap;
}

This prevents the two inline blocks (label and input) from appearing on a different line.

Upvotes: 2

brendosthoughts
brendosthoughts

Reputation: 1703

Hey so basically when you are using the float:right as many thing will appear on a row as possible if the element that does not fit will be pushed to the next row.

So the easy fix is have to set a width for .dropdown>ul>li in this case width : 140px; works for this fiddle but it will depend on the longest text length in the list

here is how it now look's in js fiddle

Upvotes: 0

Alex Shesterov
Alex Shesterov

Reputation: 27525

Add white-space: nowrap; to your CSS: 

.dropdown {
    display : inline-block;
    font-size: 12px;
    color : #646464;
    white-space: nowrap;
}

Upvotes: 4

Related Questions