Angular Material - ширина раскрывающегося списка md-autocomplete

Я использую md-autocomplete из Angular Material: здесь

Кажется, что ширина раскрывающегося списка соответствует ширине поля ввода. Если текст элемента слишком длинный, есть ellipsis.

Однако я хочу показать полный текст элемента, сохраняя при этом ширину поля ввода относительно короткой. То есть ширина раскрывающегося списка должна увеличиваться вместе с его содержимым.

Я попытался проверить стили элементов md-autocomplete, но не смог найти ни одного стиля, который бы помог. Есть идеи?

ИЗМЕНИТЬ:

Вот стиль, который у меня получился:

.md-autocomplete-suggestions-container{
    overflow-y:scroll
}

.md-autocomplete-suggestions-container .md-virtual-repeat-scroller{
    position:static
}

.md-autocomplete-suggestions-container .md-virtual-repeat-sizer{
    height:0 !important
}

.md-autocomplete-suggestions-container .md-virtual-repeat-offsetter{
    position:static
}

Однако есть еще одна проблема. overflow-y:scroll всегда показывает вертикальную полосу прокрутки, даже если она не нужна. Если я изменю его на overflow-y:auto, вертикальная полоса прокрутки, если она присутствует, создаст ellipsis. Как мне это решить?


javascript angularjs angular-material md-autocomplete
person Shawn    schedule 02.06.2016    source источник
comment
Можете ли вы поделиться кодом на Plunkr?   -  person Ann Nguyen    schedule 04.06.2016
comment
Я заметил, что стили, которые вы получили, работают, но если вы используете клавиатуру для прокрутки элементов, полоса прокрутки больше не следует за выбранным элементом :(   -  person Søren Pedersen    schedule 05.07.2018

Ответы (4)


arrow_upward
3
arrow_downward

Вы можете использовать css для стилизации md-virtual-repeat-container.

Однако это будет стилизовать каждый экземпляр md-virtual-repeat-container, который может быть на вашем сайте (т. е. md-autocomplete и md-virtual-repeat).

К сожалению, на данный момент нет возможности настроить отдельные раскрывающиеся списки md-autocomplete. Я создал тикет и запрос на вытягивание, чтобы решить эту проблему. Скрестим пальцы, чтобы это было включено в один из будущих выпусков Angular Material.

Удачи!

person Ann Nguyen    schedule 02.06.2016
comment
Спасибо. Пожалуйста, смотрите мое редактирование исходного вопроса. У меня сейчас другая проблема. - person Shawn; 02.06.2016
comment
Вы можете настроить width и max-width для md-virtual-repeat-container, но он не будет автоматически подстраиваться под список результатов, поскольку для всех дочерних элементов установлено значение position:absolute. Самое простое, что нужно сделать, это установить width и max-width на желаемый процент и отрегулировать left, чтобы центрировать результаты. Я бы не рекомендовал переопределять css для остальных дочерних элементов, так как он был написан специально для того, чтобы выглядеть и работать определенным образом. Если вам нужна полная настройка, я бы порекомендовал создать собственную пользовательскую директиву, чтобы получить именно то, что вы ищете. - person Ann Nguyen; 02.06.2016

arrow_upward
7
arrow_downward

Для тех, кто все еще сталкивается с проблемой обрезания значений автозаполнения из-за того, что ширина панели равна ширине поля, хорошая новость заключается в том, что теперь это исправлено, woohoo!

Angular Material Release 6.4.0 (2018-07-16) представил следующая особенность,

  • автозаполнение: разрешить панели иметь значение ширины auto (#11879) (8a5713e)

Итак, теперь можно просто добавить свойство panelWidth со значением auto, и панель будет увеличиваться в соответствии со значениями.

<mat-autocomplete panelWidth="auto">
      <mat-option value="myValue">Now an option with a long label will still be readable<option>
</mat-autocomplete>
person Joseph Simpson    schedule 18.07.2018

arrow_upward
3
arrow_downward

Вам нужно установить класс для вашего элемента md-autocomplete, чтобы вы могли ориентироваться на него в css. См. этот пример

  <md-autocomplete class="autocompletable"  
              md-min-length="0" 
              ... 
              placeholder="US State?" 
              md-menu-class="autocompletable-contents">
              <md-item-template>
                 <table>
                    <tr>
                        <td><span md-highlight-text="ctrl.searchText" 
                            md-highlight-flags="^i">{{item.ok}}</span>
                        </td><td>Foo</td>
                    </tr>
                 </table>
              </md-item-template>
              <md-not-found>
                 No states matching "{{ctrl.searchText}}" were found.
                 <a ng-click="ctrl.newState(ctrl.searchText)">Create a new one!</a>
              </md-not-found>
           </md-autocomplete>

И тогда в css вам нужно сделать это

  md-autocomplete.autocompletable{ width: 200px; }
  .autocompletable-contents{ }

РЕДАКТИРОВАНИЕ: протестировано с материалами 1.0.9.

person Bellash    schedule 19.07.2016

arrow_upward
1
arrow_downward

Я знаю это очень поздно, но в материалах 1.1.9 вы можете добавить атрибут md-menu-class в директиву md-autocomplete.

Добавляемый класс будет сообщать об элементе .md-autocomplete-suggestions в виртуальном повторе. Таким образом, вы сможете настроить CSS только для этого автозаполнения.

пример:

 <md-autocomplete ...  md-menu-class="search-field-autocomplete">

будет генерировать

<ul class="md-autocomplete-suggestions search-field-autocomplete" ... >              
    <li md-virtual-repeat="item in $mdAutocompleteCtrl.matches" ...

поэтому вы можете настроить с помощью css, например:

.md-autocomplete-suggestions.search-field-autocomplete {
  li {
    color: red;
  }
}
person Pierre Mallet    schedule 17.05.2018