Change position of checkbox in dropdown menu

Question

I used this snap of code to create a dropdown menu that includes textboxes: https://stackoverflow.com/a/27547021

Now, i would like to move the position of this dropdown menu to align with a certain piece of tekst. Ideally, I would like it to be at the right side of the 'Tekstpiece'. I tried to adjust the CSS, as can be seen here: https://www.w3schools.com/code/tryit.asp?filename=GDUL1WPE82S0

However, the contents of the dropdown box do not move along with the box itsself. Furthermore, hardcoding the position is likely not the best option.

Any thoughts on how this can be pulled off?

score 1 · Accepted Answer · answered Apr 16 '20 at 10:39

Change your html to this:

<!DOCTYPE html>
<html>
<h3>Tekstpiece</h3>
<form>
  <div class="multiselect">
    <div class="selectBox" onclick="showCheckboxes()">
      <select>
        <option>Select an option</option>
      </select>
      <div class="overSelect"></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>
  </div>
</form>
</html>

Assuming that you want the dropdown checkboxes want to be "lined up" with the select box.

Change position of checkbox in dropdown menu

1 Answers1