CSS positioning glitch with inline-block elements - html

Question

Please consider the following code snippet.
My question is: why is the second li, the one with class filterdivision, lower in the layout than the previous one instead of being verticaly aligned with it ? I gave it the same height and see no margin or padding that might push it down.
Javascript code isn't relevant to the question but allows the snippet to be functional.
var triggerFilter = function(filterData)
{
console.log(filterData);
}
$(".customDropdown li").on('click',function(){
var $self = $(this);
var $list = $self.parent();
if($list.hasClass("listVisible"))
{ //Whole list is visible => Selecting an option
$list.find('.active').removeClass("active");
$self.addClass("active");
$list.removeClass("listVisible");
triggerFilter({filterName:$list.data("fieldname"),filterValue:$self.data("fieldvalue")});
}
else
{
//Show whole list
$list.addClass("listVisible");
}
});
.wrapper { background: #f2f2f2;; padding: 20px;position: relative;height:60px;}
.wrapper input { box-sizing: border-box; border: 1px solid #c2c2c2; font-size: 14px; padding: 10px 15px; width: 100%;}
.wrapper ol.filters { padding:0; margin: 0; font-size: 0; height:58px;}
.wrapper ol.filters > li
{
list-style-type: none;
display: inline-block;
width: 150px;
margin-right:20px;
height: 58px;/*Need to fix height because of absolute positionned fake dropdowns*/
position:relative;
}
.wrapper ol.filters > li:last-child{ margin-right:0;}
.wrapper ol.filters > li:first-child{ width: 150px;}
.wrapper label { display:block; font-size:12px; color: #797979; margin-bottom: 3px;}
/* CSS for custom dropdown */
.customDropdown {
position:absolute;
z-index: 50;
padding:0;
margin:0;
list-style-type: none;
background: #fff;
border: 1px solid #c2c2c2;
cursor: pointer;
width:150px;
}
.customDropdown li {display:none;padding: 10px 15px;font-size:14px;}
.customDropdown li::after { position: absolute; top: 10px; right: 10px; content: ""; display: inline-block; width: 0.5em; height: 0.5em; border-right: 2px solid black; border-bottom: 2px solid black; transform: rotate(45deg);}
.customDropdown li.active {display:block;}
.customDropdown.listVisible li {display:block;border-bottom: 1px solid #f2f2f2;}
.customDropdown.listVisible li:hover {background: #f2f2f2;color:#4fbbeb;}
.customDropdown.listVisible li.active {color:#4fbbeb;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<ol class="filters">
<li class="filterSearch">
<label for="filterSearch">Search</label><input type="text" id="search">
</li>
<li class="filterDivision">
<label>Division</label>
<ol class="customDropdown" data-fieldname="division">
<li class="active" data-fieldvalue="all">All divisions</li>
<li data-fieldvalue="consulting">Consulting</li>
<li data-fieldvalue="digital">Digital</li>
<li data-fieldvalue="other">Other</li>
</ol>
</li>
<!-- ... Other filter options in li tags -->
</ol>
</div>

Answer 1

Try using
float:left
instead of
display:inline-block
in
.wrapper ol.filters > li
Although this doesn't seem to be an issue here, floating elements wont affect the parent elements height, unless you add
clear:both;
overflow:auto;
to the parent elements style like this:
<div style="clear:both; overflow:auto">
<div style="float:left">hello</div>
<div style="float:left">world</div>
</div>
here's you code snippet using floating elements (I'm not sure what's causing your issue exactly, but floating left fixes it)
var triggerFilter = function(filterData)
{
console.log(filterData);
}
$(".customDropdown li").on('click',function(){
var $self = $(this);
var $list = $self.parent();
if($list.hasClass("listVisible"))
{ //Whole list is visible => Selecting an option
$list.find('.active').removeClass("active");
$self.addClass("active");
$list.removeClass("listVisible");
triggerFilter({filterName:$list.data("fieldname"),filterValue:$self.data("fieldvalue")});
}
else
{
//Show whole list
$list.addClass("listVisible");
}
});
.wrapper { background: #f2f2f2;; padding: 20px;position: relative;height:60px;}
.wrapper input { box-sizing: border-box; border: 1px solid #c2c2c2; font-size: 14px; padding: 10px 15px; width: 100%;}
.wrapper ol.filters { padding:0; margin: 0; font-size: 0; height:58px;}
.wrapper ol.filters > li
{
list-style-type: none;
float:left;
width: 150px;
margin-right:20px;
height: 58px;/*Need to fix height because of absolute positionned fake dropdowns*/
position:relative;
}
.wrapper ol.filters > li:last-child{ margin-right:0;}
.wrapper ol.filters > li:first-child{ width: 150px;}
.wrapper label { display:block; font-size:12px; color: #797979; margin-bottom: 3px;}
/* CSS for custom dropdown */
.customDropdown {
position:absolute;
z-index: 50;
padding:0;
margin:0;
list-style-type: none;
background: #fff;
border: 1px solid #c2c2c2;
cursor: pointer;
width:150px;
}
.customDropdown li {display:none;padding: 10px 15px;font-size:14px;}
.customDropdown li::after { position: absolute; top: 10px; right: 10px; content: ""; display: inline-block; width: 0.5em; height: 0.5em; border-right: 2px solid black; border-bottom: 2px solid black; transform: rotate(45deg);}
.customDropdown li.active {display:block;}
.customDropdown.listVisible li {display:block;border-bottom: 1px solid #f2f2f2;}
.customDropdown.listVisible li:hover {background: #f2f2f2;color:#4fbbeb;}
.customDropdown.listVisible li.active {color:#4fbbeb;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<ol class="filters">
<li class="filterSearch">
<label for="filterSearch">Search</label><input type="text" id="search">
</li>
<li class="filterDivision">
<label>Division</label>
<ol class="customDropdown" data-fieldname="division">
<li class="active" data-fieldvalue="all">All divisions</li>
<li data-fieldvalue="consulting">Consulting</li>
<li data-fieldvalue="digital">Digital</li>
<li data-fieldvalue="other">Other</li>
</ol>
</li>
<!-- ... Other filter options in li tags -->
</ol>
</div>

Answer 2

Inline blocks are blocks that try to span the entire width and in your code, the .wrapper didn't have the width set, which forced it to take up space beside, and not below
var triggerFilter = function(filterData)
{
console.log(filterData);
}
$(".customDropdown li").on('click',function(){
var $self = $(this);
var $list = $self.parent();
if($list.hasClass("listVisible"))
{ //Whole list is visible => Selecting an option
$list.find('.active').removeClass("active");
$self.addClass("active");
$list.removeClass("listVisible");
triggerFilter({filterName:$list.data("fieldname"),filterValue:$self.data("fieldvalue")});
}
else
{
//Show whole list
$list.addClass("listVisible");
}
});
.wrapper { background: #f2f2f2;; padding: 20px;position: relative;height:150px; width: 60px}
.wrapper input { box-sizing: border-box; border: 1px solid #c2c2c2; font-size: 14px; padding: 10px 15px; width: 100%;}
.wrapper ol.filters { padding:0; margin: 0; font-size: 0; height:116px;}
.wrapper ol.filters > li
{
list-style-type: none;
display: inline-block;
width: 150px;
margin-top: 10px;
margin-right:20px;
height: 58px;/*Need to fix height because of absolute positionned fake dropdowns*/
position:relative;
}
.wrapper ol.filters > li:last-child{ margin-right:0;}
.wrapper ol.filters > li:first-child{ width: 150px;}
.wrapper label { display:inline-block; font-size:12px; color: #797979; margin-bottom: 3px;}
/* CSS for custom dropdown */
.customDropdown {
position:absolute;
z-index: 50;
padding:0;
margin:0;
list-style-type: none;
background: #fff;
border: 1px solid #c2c2c2;
cursor: pointer;
width:150px;
}
.customDropdown li {display:none;padding: 10px 15px;font-size:14px;}
.customDropdown li::after { position: absolute; top: 10px; right: 10px; content: ""; display: inline-block; width: 0.5em; height: 0.5em; border-right: 2px solid black; border-bottom: 2px solid black; transform: rotate(45deg);}
.customDropdown li.active {display:block;}
.customDropdown.listVisible li {display:block;border-bottom: 1px solid #f2f2f2;}
.customDropdown.listVisible li:hover {background: #f2f2f2;color:#4fbbeb;}
.customDropdown.listVisible li.active {color:#4fbbeb;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<ol class="filters">
<li class="filterSearch">
<label for="filterSearch">Search</label><input type="text" id="search">
</li>
<li class="filterDivision">
<label>Division</label>
<ol class="customDropdown" data-fieldname="division">
<li class="active" data-fieldvalue="all">All divisions</li>
<li data-fieldvalue="consulting">Consulting</li>
<li data-fieldvalue="digital">Digital</li>
<li data-fieldvalue="other">Other</li>
</ol>
</li>
<!-- ... Other filter options in li tags -->
</ol>
</div>