I need help implementing a multi-select feature with checkboxes as options.
Unfortunately, the issue arises when the div containing the options causes other elements on the same row to resize.
This is my current code:
<html>
<head>
<style>
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
</style>
<script>
var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
</script>
</head>
<body>
<div style="height:60px;background:green;width:500px"></div>
<div id="mainButtonsContainer" style="display:flex">
<button>Button1</button>
<button>Button2</button>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="one"><input type="checkbox" id="one" />First checkbox</label>
<label for="two"><input type="checkbox" id="two" />Second checkbox</label>
<label for="three"><input type="checkbox" id="three" />Third checkbox</label>
</div>
</div>
<button>Button3</button>
<button>Button4</button>
</div>
<div style="height:60px;background:red;width:500px"></div>
</body>
</html>
The actual result can be seen here: https://i.sstatic.net/YnRBg.png
Here's what I'm aiming for: https://i.sstatic.net/Z6qRB.png
The height of the element with the ID checkboxes may vary (as options are added dynamically), but it must always be displayed above the div with the red background (and any others that may exist).
Looking for advice on how to achieve this without affecting the layout adversely.