2015-09-21 6 views
6

Chcę zwiększyć szerokość pola autouzupełniania md, ponieważ niektóre z wyświetlanych elementów nie są w pełni wyświetlane (kończą się na "...").Zwiększ szerokość pola autouzupełniania md

Czy istnieje sposób zmiany szerokości pola rozwijanego md-autocomplete?

+0

spróbuj dodać .md-virtual-repeat-container.md-autocomplete-suggestions-container {right: 0; } do twojego css. Czy to właśnie chcesz osiągnąć? – Shivi

Odpowiedz

1

Dodaj md-menu-class="class-name" atrybut do <md-autocomplete> tagu i dać CSS class-name

proszę sprawdzić wersję swojej kątowej-materiału i czy ta wersja obsługuje tę funkcję, czy też nie. Jeśli powyższe nie działa. Spróbuj zrobić coś takiego jak podążanie. (Nie zalecane)

CSS:

.md-virtual-repeat-container.md-autocomplete-suggestions-container { 
    width:700px !important; 
} 

ten pracuje w codepen. Wypróbuj to.

+0

Pomógł dodanie klasy przy użyciu klasy menu md, ale pole nie zwiększyło się, gdy dodałem szerokość: 500 pikseli. Dodanie szerokości pomogło nieco, ponieważ nie ma już "...". Myślę, że zwiększyło to szerokość pola tekstowego wewnątrz listy rozwijanej, a nie samego menu rozwijanego. Jakiego CSS potrzebuję, aby zwiększyć szerokość rozwijania? – McDonnas

+0

@McDonnas Posiada również właściwość max-width ustawioną w kanale-material.css. w twoim css. Dodaj następującą wartość: max-width: 500px! Important; –

+0

dodanie max-width: 500px! Important nie wpłynęło na szerokość rozwijania. Nawet ustawiłem maksymalną szerokość na 5000 pikseli i nic to nie zmieniło. – McDonnas

1

Wygląda na to, że naprawili ten problem, więc możesz ustawić szerokość autouzupełniania md przez css, a wszystko inne dostosuje się odpowiednio.

<md-autocomplete style="width: 22em;" ... 
+0

Tak, to faktycznie działa. –