Desidero aumentare la larghezza della casella md-autocomplete, poiché alcuni degli elementi visualizzati non sono completamente visualizzati (terminano in "...").aumento md-larghezza riquadro automatico
C'è un modo per modificare la larghezza della casella a discesa di md-autocomplete?
Aggiungi md-menu-class="class-name" attributo al tag <md-autocomplete> e dare CSS per class-name
Si prega di verificare la versione del vostro angolare materiale e se tale versione supporta questa funzione o meno. Se quanto sopra non funziona. Prova a fare qualcosa come seguire. (Non raccomandato)
CSS:
.md-virtual-repeat-container.md-autocomplete-suggestions-container {
width:700px !important;
}
Questo è il lavoro nel vostro codepen. Per favore prova questo.
L'aggiunta di una classe utilizzando md-menu-class è stata di aiuto, ma la casella non è aumentata quando ho aggiunto la larghezza: 500px. L'aggiunta della larghezza ha aiutato un po 'perché non ha più il' ... '. Penso che abbia aumentato la larghezza della casella di testo all'interno del menu a discesa, non il menu a discesa in sé. Di quale CSS ho bisogno per aumentare la larghezza del dropdown? – McDonnas
@McDonnas Ha anche una proprietà di larghezza massima impostata in angular-material.css. nel tuo css. Aggiungi il seguente larghezza massima: 500px! Importante; –
L'aggiunta di max-larghezza: 500px! Importante non ha influito sulla larghezza del menu a discesa. Ho persino impostato la larghezza massima a 5000px e non ha modificato nulla. – McDonnas
Sembra che abbiano risolto il problema, quindi è sufficiente impostare la larghezza del completamento automatico md tramite css e tutto il resto viene regolato in modo appropriato.
<md-autocomplete style="width: 22em;" ...
Sì, questo funziona davvero. –
provare ad aggiungere .md-virtual-repeat-container.md-autocomplete-suggestions-container {right: 0; } al tuo css. E 'questo quello che volevi ottenere? – Shivi