Altezza di una casella di selezione HTML (menu a discesa)

Qualcuno può confermare che non è possibile modificare l'altezza di un menu a discesa che viene mostrato quando si fa clic su una casella di selezione.

L'attributo size di select lo fa sembrare un elenco, l'attributo height nel CSS non fa molto bene.

Confermato.

La parte che scende è impostata su:

1. L'altezza necessaria per mostrare tutte le voci o
2. L'altezza necessaria per mostrare xvoci (con barre di scorrimento per vedere rimanente), dove xè
   • 20 in Firefox e Chrome
   • 30 in IE 6, 7, 8
   • 16 per Opera 10
   • 14 per Opera 11
   • 22 per Safari 4
   • 18 per Safari 5
   • 11 in IE 5.0, 5.5
3. In IE / Edge, se non ci sono opzioni, un elenco stupidamente alto di 11 voci vuote.

Per (3) sopra puoi vedere i risultati in questo JSFiddle

Ho lavorato su un plugin jquery sostitutivo a discesa per combattere questo problema. A partire da questo post, è quasi indistinguibile da un menu a discesa nativo in termini di aspetto e funzionalità .

ecco una demo (anche un collegamento ai download): http://programmingdrunk.com/current-projects/dropdownReplacement/

ecco la pagina del progetto del plugin:

http://plugins.jquery.com/project/dropdownreplacement

(aggiornamento :) la pagina del plugin jquery sembra non funzionare più. Probabilmente non inserirò il mio plugin sul loro nuovo sito quando lo faranno funzionare, quindi sentiti libero di usare il link programmingdrunk.com per demo / download

NO . Non è possibile modificare l'altezza di un menu a discesa di selezione perché quella proprietà è specifica del browser.

Tuttavia, se desideri questa funzionalità, ci sono molte opzioni. Puoi usare bootstrap dropdown-menue definirne la max-heightproprietà. Qualcosa come questo.

$('.dropdown-menu').on( 'click', 'a', function() {
    var text = $(this).html();
    var htmlText = text + ' <span class="caret"></span>';
    $(this).closest('.dropdown').find('.dropdown-toggle').html(htmlText);
});

.dropdown-menu {
    max-height: 146px;
    overflow: scroll;
    overflow-x: hidden;
    margin-top: 0px;
}

.caret {
	  float: right;
    margin-top: 5%;
}

#menu1 {
    width: 160px; 
    text-align: left;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   
<div class="container" style="margin:10px">
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
    <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
    </ul>
  </div>
</div>

In realtà puoi farlo! Non preoccuparti di javascript ... Ero semplicemente bloccato sulla stessa cosa per un sito web che sto creando e se aumenti l'attributo 'font-size' in CSS per il tag, aumenta automaticamente anche l'altezza. Insignificante ma è qualcosa che mi dà molto fastidio ah ah

Questa non è una soluzione perfetta ma funziona.

Nel tag select, includi i seguenti attributi dove "n" è il numero di righe a discesa che sarebbero visibili.

<select size="1" position="absolute" onclick="size=(size!=1)?n:1;" ...>

Ci sono tre problemi con questa soluzione. 1) Viene visualizzato un rapido flash di tutti gli elementi visualizzati durante il primo clic del mouse. 2) La posizione è impostata su "assoluto" 3) Anche se ci sono meno di "n" elementi, la casella a discesa sarà comunque per la dimensione di "n" elementi.

La risposta Chi Row è una buona opzione per il problema, ma ho trovato un errore negli onclickargomenti. Invece, sarebbe:

<select size="1" position="absolute" onclick="size=(size!=1)?1:n;" ...>

(E menziona che devi sostituire la " n " con il numero di righe che ti servono)

Puoi modificare l'altezza di uno. Non utilizzare height="500"(solo un numero di esempio). Usa lo stile. Puoi usare il <style>tag o semplicemente usare questo:

<!DOCTYPE html>
<html>
<body>
  <select id="option" style="height: 100px;">
    <option value="1">Option 1
    <option value="2">Option 2
  </select>
</body>
</html>

Metto in luce il cambiamento:

  <select id="option" style="height: 100px;">

E ancora meglio ...

style="height: 100px;">

Lo vedi?

Si prega di votare se è utile!