The drop-down list appears at the very top of the page (after the click)

Issue

Here is the preview of the drop down list

Then, when I click on the dropdown to scroll the items

I think it’s because I have too many items in the dropdown?

<div class="row row-cols-3 pt-3">
   <div class="col text-end">
      <!-- Marché -->
      <label for="filterForMarkets" class="form-label">Marché</label>
   </div>
   <div class="col-4">
      <select id="filterForMarkets" name="filterForMarkets" style="min-width: 440px" class="form-select" [(ngModel)]="search.market">
      <option value="">
         Tous les marchés 
      </option>
      <option *ngFor="let m of markets$ | async" [value]="m.marketId">
      {{ m.name }}
      </option>
      </select>
   </div>
</div>

If for example, I display 3 items only, I have no problem.

<div class="row row-cols-3 pt-3">
   <div class="col text-end">
      <!-- Marché -->
      <label for="filterForMarkets" class="form-label">Marché</label>
   </div>
   <div class="col-4">
      <select id="filterForMarkets" name="filterForMarkets" style="min-width: 440px" class="form-select" [(ngModel)]="search.market">
      <option value="">
         Tous les marchés 
      </option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
      </select>
   </div>
</div>

Unfortunately, I need my loop, is there a way in css to display my items correctly, please?

Solution

Put size in <select …

<select size="3" id="filterForMarkets" name="filterForMarkets" style="min-width: 440px" class="form-select" [(ngModel)]="search.market"> 

If didn’t work just let me know.plz down votedown right away 🙂

Answered By – reza hrkeng

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0