I am facing an issue with a dropdown menu that changes the language. The problem occurs when the list of languages gets longer and the menu ends up behind other elements on the page.
I'm not sure what needs to be changed or which CSS properties I need to apply in order to keep the dropdown menu on top of the other elements, allowing users to see and select languages from the list.
I have tried to review the CSS applied to the element, but most of them are written in "LESS"
Here are some snippets:
li.lang-picker:first-child {
border-right: none;
}
.ui-append.ui-select {
background-color: white;
}
#lang-picker {
margin: -7px 15px 0 -18px;
border-color: transparent;
}
#lang-picker:hover {
border-color: #CCC;
}
#lang-picker ul {
background: white;
display: inline-block;
}
#lang-picker ul li {
display: block;
}
#lang-picker .ui-select-menu {
width: auto;
border-color: #CCC;
}
#lang-picker .ui-select-menu ul {
width: auto;
}
#lang-picker .ui-selected::before {
margin-right: 5px;
}
#lang-picker .ui-smedium {
width: auto;
}
#lang-picker > .icon {
background: none;
color: #555;
padding: 0 10px 0 0;
}
#lang-picker > .icon:hover {
background: none;
color: #555;
}
/*********************************************************
* Filter
*/
.gallery-header .header {
float: left;
padding-bottom: 10px;
font-family: 'Open Sans Light', sans-serif;
-webkit-font-smoothing: antialiased;
margin-right: 20px;
}
.gallery-header .header h1,
.gallery-header .header p {
display: inline;
margin-right: 10px;
font-weight: normal;
letter-spacing: -0.25px;
}
.gallery-header .header h1 {
font-size: 2.4em;
line-height: 16px;
color: #3fb58e;
}
.gallery-header .header p {
font-size: 1.4em;
color: #555555;
}
.gallery-header .header p a {
color: #20abdc;
text-decoration: none;
}
.gallery-header .header p a:hover {
text-decoration: underline;
color: #4abce5;
}
#tools h1 {
line-height: 1.4em;
}
.filter {
position: relative;
background: #3fb58e;
float: right;
z-index: 3;
padding: 0.5em 1em 1em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.filter label {
color: #FFF;
line-height: 1.6;
}
.filter #search-filter {
border-color: #38a27f;
}
.filter #search-filter:hover {
border-color: #2b7c61;
}
.filter #search-filter .icon {
background: #328f70;
}
.filter #search-filter .ui-select-menu {
border-color: #3fb58e;
}
.filter:before {
content: "";
display: block;
position: absolute;
top: 100%;
left: 50%;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #3fb58e;
margin-left: -10px;
}