Блог

Я использую ввод из выпадающего списка primeng и хочу, чтобы div, содержащий заполнитель метки, имел ширину 100%.
Вот как я это использую:

 <div class="ui-grid ui-grid-responsive ui-fluid">
    <div class="ui-grid-row">
        <div class="ui-grid-col-2">
            <p-dropdown [options]="solutionsDropDownData" [(ngModel)]="solutionDropDownValue" placeholder="Solution..."
                [filter]="true" (onChange)="onSolutionChange($event)">
            </p-dropdown>
        </div>
    </div>
</div>
  

Проблема в том, что я получаю пробел после заполнителя, в то время как я хочу, чтобы заполнитель был полной ширины. Пробел можно увидеть ниже:

Когда я выбираю другое значение, например, с меньшей длиной, ширина пространства изменяется, она становится больше, если я использовал тот же пример.

Я уже пробовал эти подходы, но ни один из них не работал:

1. используется параметр autoWidth, но он выдает Can't bind to 'autoWidth' since it isn't a known property of 'p-dropdown'. ошибку, если я использую его со скобками; ошибка исчезает, если я использую его без скобок, но это не работает (я упоминаю, что я импортировал DropdownModule);

2. используемые классы css, как показано ниже (я использовал их отдельно и оба, альтернативно):

   .ui-dropdown-label-container{ ширина: 100% !важно; }

   .ui-выпадающий список .ui-выпадающая панель { минимальная ширина: 100% !важно; ширина: максимальное содержимое; }

3. используемый параметр стиля.

Это происходит из-за таблицы стилей, которую вы используете для PrimeNG. Мы столкнулись с той же визуальной проблемой и добились этого, добавив приведенный ниже класс css в styles.css

 .ui-dropdown .ui-dropdown-label-container {
    width: inherit !important;
}
  

На самом деле inherit требует 100% , я не мог понять, почему это не сработало для вас.

Мне удалось решить эту проблему, добавив приведенный ниже код:

По сути, я просто добавил выпадающий список внутри div и изменил цвет фона div, который его содержит.