CODEWITHSUNDEEP
htmljquerycss
Rash J
Rash J

Reputation: 143

Display div over other elements

I would like to implement a multiselect with checkboxes as options.

The problem is that the div with options resizes other elements on the same row.

My code is:

<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 result is: enter image description here

the expected result is: enter image description here

the height of element with id checkboxes could be changed (the options could be added dynamically) but it should be display over the div with red background (and others if exists).

How is it possible to solve that?

Upvotes: 0

Views: 65

Answers (1)

Rubens
Rubens

Reputation: 366

You need to remove the #checboxes div from the normal document flow with absolute positioning, and since you'd like it to track the select position you need to relate the two by moving the #checkboxes inside the .multiselect so they can have the same parent.

Upvotes: 1

Related Questions