Applying styles to p-dropdown element

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
fmelo78
Posts: 3
Joined: 31 Aug 2021, 03:11

09 Dec 2021, 03:45

Hello, guys.

I'm trying to change the style of my p-dropdown element and I´m facing some problems.

Project Version: PrimeNG 12 / Primeflex 3

Looking around Internet, I found the following snippet, that works fine:
[style]="{'width':'100%', 'background-color':'greenyellow'}"

But I would like to keep all style rules concentrated in the CSS file, instead of using inline style, directly on the element. I tried the following codes, but none of them worked
<p-dropdown [class]="'dd-style'" [options]="cities" [(ngModel)]="selectedCity"></p-dropdown>
<p-dropdown class="dd-style" [options]="cities" [(ngModel)]="selectedCity"></p-dropdown>
<p-dropdown [styleClass]="'dd-style'" [options]="cities" [(ngModel)]="selectedCity"></p-dropdown>
<p-dropdown styleClass="dd-style" [options]="cities" [(ngModel)]="selectedCity"></p-dropdown>

My CSS class:
.dd-style {
width: 100% !important;
background-color: greenyellow;
}

Wraping up... Is that possible to keep the style rules for dropdown element concentrated in the CSS file?

merve7
Posts: 861
Joined: 12 Sep 2017, 10:44

17 Dec 2021, 10:20

Hi,

I tried the below version and it works;

Code: Select all

<p-dropdown [options]="cities" [(ngModel)]="selectedDrop" placeholder="Select a City" [showClear]="true" styleClass="dd-style"></p-dropdown>
Image

Could you check that you import the stylesheet you added the class to?

Best regards,
Merve Özçifçi

Post Reply

Return to “Omega - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests