Greetings everyone, I am currently working on a dropdown language selection feature for my website.
The issue I am facing is that when I click on the language dropdown in the header, it causes the height of the header to shift.
$('.language-select').click(function () {
$(this).toggleClass('open');
})
$('.language-select li').click(function () {
$('ul li').removeClass('active');
$(this).toggleClass('active');
}).language-select:hover {
background-color: #242424;
color: #fff;
}
.language-select {
margin: 5px;
display: inline-flex;
flex-direction: column;
color: #000;
background-color: #e0e0e0;
height: 45px;
width: 220px;
overflow: hidden;
cursor: pointer;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
/*Animate*/
-webkit-transition: all 150ms ease-in-out;
-moz-transition: all 150ms ease-in-out;
-o-transition: all 150ms ease-in-out;
transition: all 150ms ease-in-out;
}
.language-select li {
vertical-align: middle;
text-align: left;
order: 2;
min-height: 49px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 10px 5px 10px 10px;
}
.language-select li:hover {
cursor: pointer;
background: #191919;
}
.language-select li img {
margin-right: 10px;
width: 24px;
height: 24px;
vertical-align: middle;
display: inline-block;
}
.language-select li span {
vertical-align: middle;
display: inline-block;
}
.language-select.open {
height: auto;
}
.language-select li.active {
order: 1;
pointer-events: none;
}
.icon-boxes {
background-color: #7c7c7c;
opacity: 0.88;
margin: 10px;
letter-spacing: 1px;
border-radius: 10px;
}
.container-fluid {
width: 100%;
padding-right: 10px;
padding-left: 10px;
margin-right: auto;
margin-left: auto;
}
.row {
width: 100%;
display: flex;
flex-wrap: wrap;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="content">
<div class="icon-boxes">
<div class="container-fluid">
<div class="row">
<ul class="language-select">
<li class="active" data-lang="ua"><img src="~/images/flas/ua.png"><span>Ukraine</span></li>
<li data-lang="en"><img src="~/images/flas/eng.png"><span>English</span></li>
</ul>
</div>
</div>
</div>
</div>As you can observe, clicking on the language dropdown causes an increase in the header's size, which is not desired. Is there a way to make the dropdown open without affecting the header's height?
Perhaps it is possible to create a collapsible dropdown that does not interfere with the header height.