I've encountered an issue with my custom dropdown list as it displaces other elements when it appears. I want it to overlay on top of everything else, similar to the default select behavior.
Despite trying to set position: relative; and z-index:100;, I haven't been able to achieve the desired result.
For reference, here's the fiddle link: https://jsfiddle.net/vaxobasilidze/Lcztc8gc/
$('body').on('click touchend', '#typeSelect', function() {
$('#typeDropDownList').css({
'display': 'list-item'
});
});
$('body').on('click touchend', '#typeDropDownList li', function() {
var value = $(this).text();
$('#typeSelect').text(value);
$('#typeDropDownList').toggle();
});#typeSelect {
list-style: none;
margin: 0;
padding: 0;
border: 1px solid black;
background-repeat: repeat;
background-position: 300px;
width: 353px;
padding: 5px;
line-height: 1;
border-radius: 4px;
box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1);
-webkit-appearance: none;
outline: none;
color: #b8c0c8;
width: 100%;
cursor: pointer;
}
#typeSelect li {
width: 100%;
}
#typeDropDownList {
margin: 0;
padding: 0;
line-height: 1;
-webkit-appearance: none;
outline: none;
color: #b8c0c8;
width: 100%;
border-radius: 3px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.26);
display: none;
position: relative;
z-index: 100;
}
#typeDropDownList li {
list-style: none;
margin: 0 auto;
padding: 0;
border-top: 1px solid rgba(0, 0, 0, 0.7);
background-repeat: repeat;
background-position: 300px;
padding: 5px;
width: 100%;
cursor: pointer;
}
#typeDropDownList li:first-child {
border-top: none;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
#typeDropDownList li:last-child {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="settingsDiv">
<table style="width: 100%;">
<tr>
<th colspan="2">Adapter 0</th>
</tr>
<tr>
<td class="adapterInput" colspan="2" style="text-align: center;">
<ul id="typeSelect">
<li>--- Choose type ---</li>
</ul>
<ul id="typeDropDownList">
<li>--- Choose type ---</li>
<li>DVB-S</li>
<li>DVB-S2</li>
<li>DVB-T</li>
<li>DVB-T2</li>
<li>DVB-C</li>
</ul>
</td>
</tr>
<table id="adapterInputContainer">
<tr>
<td>Frequency:</td>
<td class="adapterInput">
<select>
<option value="S">DVB-S</option>
<option value="S2">DVB-S2</option>
<option value="T">DVB-T</option>
<option value="T2">DVB-T2</option>
</select>
</td>
</tr>
<tr>
<td>Inversion:</td>
<td class="adapterInput">
<select>
<option value="AUTO">AUTO</option>
<option value="ON">ON</option>
<option value="OFF">OFF</option>
</select>
</td>
</tr>
<tr>
<td>Voltage:</td>
<td class="adapterInput">
<select>
<option value="13">13</option>
<option value="18">18</option>
<option value="OFF">OFF</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td class="adapterInput">
<input type="submit" style="float: right;">
</td>
</tr>
</table>
</table>
</div>