Je veux ajouter une barre de défilement dans le menu déroulant voici le html

<ul class="dropdown-menu dropdown-scrollbar">

                            <!-- <li><a href="#"></a></li> -->
                               {% for table_name in obj %}
                                <option>{{ table_name.table_name }}</option>
                              {% endfor %}                          
                            <!-- <li><a href="#">Dropdown link</a></li> -->
</ul>     

j'essaie ce css mais cela ne fonctionne pas * je sais que c'est une question en double, mais j'essaie le css de la réponse SQ et ne fonctionne toujours pas, peut-être qu'il manque quelque chose?

.dropdown-scrollbar
{
    height: 50px;
    overflow-x: hidden;
    overflow-y: scroll;

}

Merci beaucoup

0
trytocode 4 nov. 2019 à 10:36

3 réponses

Au lieu de spécifier spécifiquement l'axe des x et l'axe des y, vous ne pouvez écrire que le débordement car il prendra et ajustera automatiquement les deux axes.

Vous pouvez également utiliser débordement: auto au lieu de débordement: défilement parce que dans défilement (la définition de la valeur de débordement d'une boîte pour faire défiler cacher le contenu du rendu en dehors de la boîte, mais offrira des barres de défilement pour faire défiler l'intérieur de la boîte pour afficher le contenu),

auto (cela résout le problème de l'obtention des barres de défilement lorsque vous n'en avez pas besoin. Les barres de défilement n'apparaîtront que s'il y a du contenu qui se détache réellement de l'élément).

J'ai mis à jour le code et cela fonctionne bien, jetez un œil.

.dropdown-scrollbar
{
    height: 50px;
    overflow: scroll;

}
<ul class="dropdown-menu dropdown-scrollbar">

                            <!-- <li><a href="#"></a></li> -->
                               {% for table_name in obj %}
                                <option>{{ table_name.table_name }}</option>
                              {% endfor %}                          
                            <!-- <li><a href="#">Dropdown link</a></li> -->
</ul>     
0
Ronak Khangaonkar 4 nov. 2019 à 10:18

Vous devez ajouter max-height au lieu de height à votre classe .dropdown-scrollbar ou dropdown-menu:

  .dropdown-scrollbar{
    max-height: 50px;
    overflow-x: hidden;
    overflow-y: auto;
   }
1
Akshita Karetiya 4 nov. 2019 à 08:04

utiliser ce css

.dropdown-scrollbar {
    height: auto;
    max-height: 200px;
    overflow-x: hidden;
}
0
user11538602 4 nov. 2019 à 07:52