web-dev-qa-db-fra.com

premierNG p-dropdown stretch 100%

Comment régler la largeur de la liste déroulante primeNG pour qu'elle s'étire de 100% à l'intérieur de son conteneur?

Il semble avoir fixé element.style et le .ui-dropdown {width: 100%} override Ne fonctionne pas.

cssprimeng
11
McLac

J'ai trouvé à utiliser l'approche Responsive et à appliquer .ui-fluid style avec Grid CSS au conteneur alors que p-dropdown devrait avoir l'attribut [autoWidth] = "false" .

Exemple:

<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>
22
McLac

Dans mon cas, j'ai utilisé autoWidth = false et défini l'attribut de style comme suit

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

Vous devriez écrire dans un fichier css en utilisant la classe mentionnée ci-dessous,

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

Réglez-le sur !important 

LIVE DEMO

2
Aravind

Vous devriez éditer une classe dans un fichier primeng.min.css comme ci-dessous,

.ui-dropdown .ui-dropdown-panel {
  min-width: 100%;
  width: max-content;
}
<p-dropdown id="id" [options]="list"></p-dropdown>

alors Dropdownlist devrait prendre la taille de la plus grande option.

0
Ganesh Doke