primeNG p-dropdown stretch 100%

Question

Jak ustawić szerokość rozwijania primeNG, aby rozciągnąć 100% wewnątrz kontenera?

Wydaje mają stałe element.style a .ui-rozwijane {width: 100%} przesłanianie nie działa.

Answer 1

znalazłem użyć elastycznego podejścia i zastosowania .ui płynu styl z siatki CSS w pojemniku podczas p-rozwijana powinny mieć [autoWidth] = "false" atrybut .

Przykład:

<div class="ui-grid ui-grid-responsive ui-fluid"> 
    <div class="ui-grid-row"> 
     <div class="ui-grid-col-12"> 
      <p-dropdown [autoWidth]="false"></p-dropdown> 
     </div> 
    </div> 
</div> 

Answer 2

W moim przypadku użyłem autoWidth = false i ustawić styl attrribute jak poniżej

<p-dropdown [options]="educationLevels" [(ngModel)]="selectedEducationLevel" 
name="educationlevel" autoWidth="false" [style]="{'width':'100%'}"></p-dropdown> 

Answer 3

Powinieneś pisać w pliku css za pomocą wymienionego klasy jak poniżej,

.ui-dropdown { 
    width:100% !important; 
} 

Ustaw jako !important

LIVE DEMO

Answer 4

Powinieneś edycji klasę w pliku primeng.min.css jak poniżej,

.ui-dropdown .ui-dropdown-panel { 
 
    min-width: 100%; 
 
    width: max-content; 
 
}

<p-dropdown id="id" [options]="list"></p-dropdown>

następnie DropdownList powinny wielkości największego opcji.