J'utilise une balise select pour sélectionner des options dans une liste déroulante, mais en raison du nombre d'éléments, la liste monte, comme si elle était déroulante. J'utilise Bootstrap.
J'ai vérifié d'autres codes mais je n'ai trouvé aucun résultat.
<div class="select-style" style="display: inline-block;">
<select id="year">
<option value="hide">-- Year --</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="201">2011</option>
<option value="2015">2015</option>
<option value="201">2011</option>
<option value="202">2012</option>
<option value="203">2013</option>
<option value="204">2014</option>
<option value="205">2015</option>
<option value="202">2012</option>
<option value="203">2013</option>
<option value="204">2014</option>
<option value="205">2015</option>
</select>
</div>
Cette option monte quand il y a plus d'options dans le menu. Je veux qu'il aille vers le bas.
4 Réponses :
Essayez vous pouvez également ajuster la hauteur avec css
ne fonctionne pas ... les boîtes se sont déplacées dans une direction différente
Vous pouvez utiliser du CSS comme
CSS:
#year option{
width:150px;
}
Si vous souhaitez modifier la largeur de l'option, vous pouvez le faire dans votre css:
#year {
width:150px;
}
Utilisez simplement data-dropup-auto="false"
Example:
<div class="select-style" data-dropup-auto="false" style="display: inline-block;">
<select id="year">
<option value="hide">-- Year --</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="201">2011</option>
<option value="2015">2015</option>
<option value="201">2011</option>
<option value="202">2012</option>
<option value="203">2013</option>
<option value="204">2014</option>
<option value="205">2015</option>
<option value="202">2012</option>
<option value="203">2013</option>
<option value="204">2014</option>
<option value="205">2015</option>
</select>
</div>
Cela ne marche pas. Essayez d'exécuter l'extrait de code avec la page défilée de sorte que le sélecteur se trouve dans la moitié inférieure de la page. Ça monte toujours. OP n'a pas spécifié qu'ils utilisent Bootstrap.
@RoshanYadav Utilisez-vous Bootstrap? si c'est le cas, essayez d'utiliser data-flip = "false" , si cela ne fonctionne toujours pas, vous devrez désactiver le comportement par défaut de votre navigateur qui fait basculer votre menu déroulant.
Toujours le même, oui j'utilise bootstrap
J'ai trouvé une solution qui forcera l'expansion vers le bas et vous pouvez définir la hauteur de la sélection. Voici le violon ( vous avez besoin de ressources ): JSFiddle
<select> <option value='1'>2010</option> <option value='2'>2011</option> <option value='1'>2012</option> <option value='2'>2013</option> <option value='1'>2014</option> <option value='2'>2015</option> <option value='1'>2016</option> <option value='2'>2017</option> <option value='1'>2018</option> <option value='2'>2019</option> </select>
$(function(){
$('select').chosen({width: '100px'});
$('ul.chosen-results').css('min-height', '100px');
$('ul.chosen-results').css('max-height', '100px');
});
Salut et bienvenue à SO. Veuillez consulter Comment demander et fournir un Exemple minimal, complet et vérifiable . Pourriez-vous fournir une capture d'écran ou le code complet de votre sélection ainsi qu'une capture d'écran du comportement attendu?
Ce comportement est contrôlé par le navigateur et dépend de la hauteur de la fenêtre au-dessus / en dessous de l'élément
select. Vous devrez peut-être créer une liste déroulante personnalisée.Je pense que c'est parce qu'au-dessus de la sélection, il y a suffisamment d'espace pour qu'il puisse tenir dans l'écran, alors qu'en dessous, il n'y en a pas.
comment puis-je le changer pour qu'il tienne en dessous?