increase size of modal (when dropdown is clicked)-CodePudding

I have a modal with a dropdown. When clicking the dropdown the modal always gets a scrollbar and I wanted to know if I miss something obvious? I could probably just add a class modalheight and define in css:

.modalheight {
     min-height: 400px;
}

but this seems not like a true solution.

function closeModal () {
    var modal = document.getElementById("mymodal")
    modal.classList.remove("is-active")
};

function activateDropDown () {
    var dropdown = document.getElementById("mydropdown");
    dropdown.classList.add("is-active")
};

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">

<div  id="mymodal">
  <div >
  </div>
  <div >
    <div >
      <article >
         <div >
           <div >
             this is a test:   
               <div  id="mydropdown">
                 <div >
                   <button  aria-haspopup="true" aria-controls="dropdown-menu" onclick="activateDropDown()">
                     <span>Dropdown button</span>
                       <div  id="dropdown-menu" role="menu">
                         <div >
                           <a href="#" >
                             test 1
                           </a>
                           <a href="#" >
                             test 2
                           </a>
                           <a href="#" >
                             test 3
                           </a>
                         </div>
                       </div>
                     </div>
                   </div>
                </div>
            </article>
        </div>
    </div>
</div>

Can I somehow make the modal big enough to fit all the buttons options dynamically? If not, how would I do it statically?

CodePudding user response：

Check this option, I think the behaviour is connected with the dropdown menu absolute positioning that takes it out of the normal flow. By the way, for button html tag both the starting and ending tag are mandatory.

function closeModal () {
    var modal = document.getElementById("mymodal")
    modal.classList.remove("is-active")
};

function activateDropDown () {
    var dropdown = document.getElementById("mydropdown");
    dropdown.classList.toggle("is-active")
};

#dropdown-menu {
  position: static;
}

#modal-content {
  max-height: none;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">

<div  id="mymodal">
  <div >
  </div>
  <div  id="modal-content">
    <div >
      <article >
         <div >
           <div >
             this is a test:   
               <div  id="mydropdown">
                 <div >
                   <button  aria-haspopup="true" aria-controls="dropdown-menu" onclick="activateDropDown()"> <span>Dropdown button</span></button>
                       <div  id="dropdown-menu" role="menu">
                         <div >
                           <a href="#" >
                             test 1
                           </a>
                           <a href="#" >
                             test 2
                           </a>
                           <a href="#" >
                             test 3
                           </a>
                         </div>
                       </div>
                     </div>
                   </div>
                </div>
            </article>
        </div>
    </div>
</div>