CODEWITHSUNDEEP
javascripthtmlcss
Koray
Koray

Reputation: 91

What should I use for drop-down menu with lots of element inside it?

I have used dropdown-menu bootstrap class for my data filter, It was going fine so far but when I have too many elements it does not fit the page so I've tried to give it a height this did not work as I hoped.
enter image description here

My question is what should I change or can I achieve this using something else?

This is my HTML.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="btn-group" style="margin-left:auto; margin-right:0;">
  <button type="button" class="btn btn-danger dropdown-toggle"
          data-toggle="dropdown"
          aria-haspopup="true"
          aria-expanded="false">
    Time Filters
  </button>
  <div class="dropdown-menu">
     <input class="ohs-searcher" id="ohs-year-filter"
            type="text" placeholder="Search.."/>
     <span id="year_2023_filter" class="dropdown-item"
        name="year_filter">2023</span>
     <span id="year_2022_filter" class="dropdown-item"
        name="year_filter">2022</span>
     <span id="year_2021_filter" class="dropdown-item"
        name="year_filter">2021</span>
     <span id="year_2020_filter" class="dropdown-item"
        name="year_filter">2020</span>
     <span id="year_2019_filter" class="dropdown-item"
        name="year_filter">2019</span>
     <span id="year_2018_filter" class="dropdown-item"
        name="year_filter">2018</span>
     <span id="year_2017_filter" class="dropdown-item"
        name="year_filter">2017</span>
     <span id="year_2016_filter" class="dropdown-item"
        name="year_filter">2016</span>
     <span id="year_2015_filter" class="dropdown-item"
        name="year_filter">2015</span>
     <span id="year_2015_filter" class="dropdown-item"
        name="year_filter">2015</span>
     <span id="year_2015_filter" class="dropdown-item"
        name="year_filter">2015</span>
     <span id="year_2015_filter" class="dropdown-item"
        name="year_filter">2015</span>
     <span id="year_2015_filter" class="dropdown-item"
        name="year_filter">2015</span>
     <span id="year_2015_filter" class="dropdown-item"
        name="year_filter">2015</span>
     <span id="year_2015_filter" class="dropdown-item"
        name="year_filter">2015</span>
     <span id="year_2015_filter" class="dropdown-item"
        name="year_filter">2015</span>
     <span id="year_2015_filter" class="dropdown-item"
        name="year_filter">2015</span>
     <span id="year_2015_filter" class="dropdown-item"
        name="year_filter">2015</span>
     <span id="year_2015_filter" class="dropdown-item"
        name="year_filter">2015</span>
     <span id="year_2015_filter" class="dropdown-item"
        name="year_filter">2015</span>
     <span id="year_2015_filter" class="dropdown-item"
        name="year_filter">2015</span>
  </div>
</div>

Upvotes: 1

Views: 149

Answers (1)

yunzen
yunzen

Reputation: 33439

This is my proposal

.filters.show {
  max-height: 90vh;
  top: 100% !important;
  transform: none !important;

  display: flex !important;
  flex-direction: column;
  
}
.filters-body {
  overflow: auto;
}

.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="btn-group" style="margin-left:auto; margin-right:0;">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Time Filters
  </button>
  <div class="dropdown-menu filters">
    <div class="filters-header">
      <input class="ohs-searcher" id="ohs-year-filter" type="text" placeholder="Search.." />
    </div>
    <div class="filters-body">
      <span id="year_2023_filter" class="dropdown-item" name="year_filter">2023</span>
      <span id="year_2022_filter" class="dropdown-item" name="year_filter">2022</span>
      <span id="year_2021_filter" class="dropdown-item" name="year_filter">2021</span>
      <span id="year_2020_filter" class="dropdown-item" name="year_filter">2020</span>
      <span id="year_2019_filter" class="dropdown-item" name="year_filter">2019</span>
      <span id="year_2018_filter" class="dropdown-item" name="year_filter">2018</span>
      <span id="year_2017_filter" class="dropdown-item" name="year_filter">2017</span>
      <span id="year_2016_filter" class="dropdown-item" name="year_filter">2016</span>
      <span id="year_2015_filter" class="dropdown-item" name="year_filter">2015</span>
      <span id="year_2015_filter" class="dropdown-item" name="year_filter">2015</span>
      <span id="year_2015_filter" class="dropdown-item" name="year_filter">2015</span>
      <span id="year_2015_filter" class="dropdown-item" name="year_filter">2015</span>
      <span id="year_2015_filter" class="dropdown-item" name="year_filter">2015</span>
      <span id="year_2015_filter" class="dropdown-item" name="year_filter">2015</span>
      <span id="year_2015_filter" class="dropdown-item" name="year_filter">2015</span>
      <span id="year_2015_filter" class="dropdown-item" name="year_filter">2015</span>
      <span id="year_2015_filter" class="dropdown-item" name="year_filter">2015</span>
      <span id="year_2015_filter" class="dropdown-item" name="year_filter">2015</span>
      <span id="year_2015_filter" class="dropdown-item" name="year_filter">2015</span>
      <span id="year_2015_filter" class="dropdown-item" name="year_filter">2015</span>
      <span id="year_2015_filter" class="dropdown-item" name="year_filter">2015</span>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions