Question 290593 in Html Question posted in
Some basic documentation can be found here.

Html – 2 Dropdown Checklist

I’m currently working on a two-dropdown multiselect menu, and I’m facing a challenge with the dropdown behavior. Specifically, I want the first dropdown and its options to stay fixed at the top, ensuring that clicking on it doesn’t cause the second dropdown to shift downward.

Here is the project

every time I click on the first dropdown menu, the second dropdown menu gets dragged to the bottom

const selectBtn = document.querySelector(".select-btn");
const item = document.querySelectorAll(".items");

selectBtn.addEventListener("click", () => {
  selectBtn.classList.toggle("open");
});

item.forEach(items => {
  items.addEventListener("click", () => {
    items.classList.toggle("checked");

    let checked = document.querySelectorAll(".checked"),
      btnText = document.querySelector(".btn-text");

    if (checked && checked.length > 0 && checked.length <= 1) {
      btnText.innerText = `${checked.length} Selected Item`;
    } else if (checked && checked.length > 1) {
      btnText.innerText = `${checked.length} Selected Items`;
    } else {
      btnText.innerText = "Select Year and Semester";
    }
  });
})
:root {
  --yellow: #FFD83A;
  --gray: #D0D0D0;
  --lightGray: #e1e1e1;
  --blue: #004AAD;
  --black: #141413;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  width: 22rem;
  height: 35rem;
  overflow: hidden;
}


/*Navbar*/

.navbar h2 {
  font-size: 1.4rem;
}

.navbar ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
  margin: 15px 4px 5px;
}

.navbar li img {
  width: 30px;
  height: 30px;
}


/*Header*/

.header p {
  text-align: center;
  font-size: .8rem;
  margin-bottom: 20px;
}


/*drop-down Checkbox*/

.container {
  position: relative;
  max-width: 290px;
  font-weight: lighter;
  margin: 0px 30px;
}

.select-btn {
  background-color: var(--gray);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  cursor: pointer;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  margin-bottom: 15px;
}

.select-btn .btn-text {
  font-size: 0.9rem;
  font-weight: bold;
}

.select-btn .arrow-down {
  display: flex;
  justify-content: center;
  transition: 0.3s;
}

.select-btn.open .arrow-down {
  transform: rotate(-180deg);
}

.arrow-down .arrow-icon {
  font-size: 1rem;
}


/*drop-down Items*/

.list-items {
  position: relative;
  border-radius: 5px;
  margin-top: 7px;
  background-color: var(--gray);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  font-size: 1rem;
  display: none;
}

.select-btn.open~.list-items {
  display: block;
}

.list-items .items {
  list-style: none;
  display: flex;
  align-items: center;
  padding: 10px;
  height: 30px;
  cursor: pointer;
  border-radius: 5px;
  transition: 0.2s;
}

.list-items .items:hover {
  background-color: var(--yellow);
}

.items .checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid;
  border-radius: 5px;
  width: 16px;
  height: 16px;
  margin-right: 15px;
  transition: all 0.3 ease-in-out;
}

.items.checked .checkbox {
  color: var(--yellow)
}

.checkbox .check-icon {
  font-size: 0.6rem;
  transform: scale(0);
  transition: all 0.3 ease-in-out;
}

.items.checked .check-icon {
  transform: scale(1);
}
<section class="section">
  <div class="container">
    <div class="select-btn">
      <span class="btn-text">Select Year and Semester</span>

      <span class="arrow-down">
                    <i class="fa-solid fa-circle-chevron-down arrow-icon"></i>
                </span>
    </div>

    <ul class="list-items">
      <li class="items">
        <span class="checkbox">
                        <i class="fa-solid fa-circle check-icon"></i>
                    </span>
        <span class="item-text">1st Year 1st Semester</span>
      </li>

      <li class="items">
        <span class="checkbox">
                        <i class="fa-solid fa-circle check-icon"></i>
                    </span>
        <span class="item-text">1st Year 2nd Semester</span>
      </li>

      <li class="items">
        <span class="checkbox">
                        <i class="fa-solid fa-circle check-icon"></i>
                    </span>
        <span class="item-text">2nd Year 1st Semester</span>
      </li>

      <li class="items">
        <span class="checkbox">
                        <i class="fa-solid fa-circle check-icon"></i>
                    </span>
        <span class="item-text">2nd Year 2nd Semester</span>
      </li>

      <li class="items">
        <span class="checkbox">
                        <i class="fa-solid fa-circle check-icon"></i>
                    </span>
        <span class="item-text">3rd Year 1st Semester</span>
      </li>

      <li class="items">
        <span class="checkbox">
                        <i class="fa-solid fa-circle check-icon"></i>
                    </span>
        <span class="item-text">3rd Year 2nd Semester</span>
      </li>

      <li class="items">
        <span class="checkbox">
                        <i class="fa-solid fa-circle check-icon"></i>
                    </span>
        <span class="item-text">4th Year 1st Semester</span>
      </li>

      <li class="items">
        <span class="checkbox">
                        <i class="fa-solid fa-circle check-icon"></i>
                    </span>
        <span class="item-text">4th Year 2nd Semester</span>
      </li>

    </ul>
  </div>

  <div class="container">
    <div class="select-btn">
      <span class="btn-text">Select Subject</span>

      <span class="arrow-down">
                    <i class="fa-solid fa-circle-chevron-down arrow-icon"></i>
                </span>
    </div>


  </div>

</section>
Tags:

2

Answers


  1. 0

    make the

    .list-items {
  position: absolute;
}

    It should work

    Login or Signup to reply.
  2. 0

    Hi I have a custom dropdown with checkbox code that is work for me. I know the drowpdown text is not same as you, but you can use it and change your text.

    document.addEventListener('DOMContentLoaded', function () {


           
            function initializeCustomDropdown(containerSelector) {

                var container = document.querySelector(containerSelector);


                container.querySelectorAll('.custom-dropdown-onclick').forEach(function (filter) {
                    filter.addEventListener('click', function () {
                        var dropdown = this.nextElementSibling;
                        dropdown.style.display = (dropdown.style.display === 'none' || dropdown.style.display === '') ? 'block' : 'none';
                    });
                });

                document.addEventListener('click', function (event) {
                    if (!event.target.closest(".custom-dropdown-select, .custom-dropdown-area")) {
                        container.querySelectorAll(".custom-dropdown-area").forEach(function (dropdown) {
                            dropdown.style.display = 'none';
                        });
                    }
                });



                var placeholder = container.querySelector(".selected-items-placeholder");

                container.querySelectorAll(".custom-dropdown-all").forEach(function (checkbox) {
                    checkbox.addEventListener('change', function () {
                        var group = this.dataset.group;
                        var itemSelected = [];

                        container.querySelectorAll(group).forEach(function (checkbox) {
                            checkbox.checked = this.checked;
                        }, this);

                        if (this.checked) {
                            placeholder.innerHTML = 'All';
                        } else {
                            container.querySelectorAll(group + ':checked').forEach(function (checkbox) {
                                itemSelected.push(checkbox.value);
                            });
                            placeholder.innerHTML = itemSelected.join(',');
                        }
                    });
                });

                container.querySelectorAll('.custom-dropdown-child').forEach(function (checkbox) {
                    checkbox.addEventListener('change', function () {
                        var itemSelected = [];
                        container.querySelectorAll('.custom-dropdown-child:checked').forEach(function (checkbox) {
                            itemSelected.push(checkbox.value);
                        });

                        if (container.querySelectorAll('.custom-dropdown-child:checked').length === container.querySelectorAll('.custom-dropdown-child').length) {
                            container.querySelector(".custom-dropdown-all").checked = true;
                            placeholder.innerHTML = 'All';
                        } else {
                            container.querySelector(".custom-dropdown-all").checked = false;
                            placeholder.innerHTML = itemSelected.join(',');
                        }
                    });
                });
            }

            // Usage example
            initializeCustomDropdown('.custom-dropdown-one');
            initializeCustomDropdown('.custom-dropdown-two');

        });
    .custom-dropdown-select {
            position: relative;
            border: 1px solid #999999;
            border-radius: 3px;
            float: left;
            max-width: 200px;
            width: 100%;
            background: #ffffff;
            padding: 5px 10px;
            margin: 5px;
            height: 20px;
        }

        .hide {
            display: none
        }

        .custom-dropdown-select-arrow {
            position: absolute;
            top: 17px;
            right: 5px;
            border-top: 6px solid #666666;
            border-left: 5px solid transparent;
            border-bottom: 6px solid transparent;
            border-right: 5px solid transparent;
            z-index: 1;
        }

        .custom-dropdown-onclick {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            background: transparent;
            cursor: pointer;
            z-index: 1;
            height: 40px;
        }

        .custom-dropdown-area {
            background: #ffffff;
            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.24);
            position: absolute;
            width: 100%;
            padding: 10px 0;
            top: 38px;
            left: 0;
            z-index: 2;
        }

        .custom-dropdown-area .custom-dropdown-list {
            padding: 0 !important;
            margin: 0 !important;
        }

        .custom-dropdown-area .custom-dropdown-list li {
            list-style: none;
        }

        .custom-dropdown-placeholder {
            display: block;
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        <div class="custom-dropdown-select custom-dropdown-one">
        <span class="custom-dropdown-placeholder selected-items-placeholder">All</span>
        <span class="custom-dropdown-select-arrow "></span>
        <span class="custom-dropdown-onclick"></span>
        <div class="custom-dropdown-area hide">
            <div>
                <input id="select-all" type="checkbox" class="custom-dropdown-all" data-group=".custom-dropdown-child">
                <label for="select-all" class="text-black">All</label><br>
                <ul class="custom-dropdown-list">
                    <li>
                        <input type="checkbox" class="custom-dropdown-child" name="item" value="Office">
                        <label>Office</label>
                    </li>
                    <li>
                        <input type="checkbox" class="custom-dropdown-child" name="item" value="Land">
                        <label >Land</label>
                    </li>
                    <li>
                        <input type="checkbox" class="custom-dropdown-child" name="item" value="Medical">
                        <label >Medical</label>
                    </li>
                    <li><input type="checkbox" class="custom-dropdown-child" d name="item" value="Industrial">
                        <label >Industrial</label>
                    </li>
                    <li>
                        <input type="checkbox" class="custom-dropdown-child" name="item"  value="Flex">
                        <label >Flex</label>
                    </li>
                    <li>
                        <input type="checkbox" class="custom-dropdown-child" name="item"  value="Specialty">
                        <label >Specialty</label>
                    </li>
                    <li>
                        <input type="checkbox" class="custom-dropdown-child" name="item" value="Medical Office">
                        <label >Medical Office</label>
                    </li>
                    <li>
                        <input type="checkbox" class="custom-dropdown-child" name="item" value="Retail">
                        <label >Retail</label>
                    </li>
                    <li>
                        <input type="checkbox" class="custom-dropdown-child" name="item" value="Build to Suite">
                        <label >Build to Suite</label>
                    </li>
                </ul>
            </div>

        </div>
    </div>

    <div class="custom-dropdown-select custom-dropdown-two">
        <span class="custom-dropdown-placeholder selected-items-placeholder">All</span>
        <span class="custom-dropdown-select-arrow "></span>
        <span class="custom-dropdown-onclick"></span>
        <div class="custom-dropdown-area hide">
            <div>
                <input id="select-all" type="checkbox" class="custom-dropdown-all" data-group=".custom-dropdown-child">
                <label for="select-all" class="text-black">All</label><br>
                <ul class="custom-dropdown-list">
                    <li>
                        <input type="checkbox" class="custom-dropdown-child" name="item" value="For Sale">
                        <label>For Sale</label>
                    </li>
                    <li>
                        <input type="checkbox" class="custom-dropdown-child" name="item" value="For Lease">
                        <label >For Lease</label>
                    </li>
                   
                </ul>
            </div>

        </div>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search