Can't set styleclass on dropdown

UI Components for Angular
Post Reply
aflorin
Posts: 55
Joined: 13 Dec 2017, 19:01

11 Feb 2019, 20:44

Using PrimeNG 7.0.5

I'm trying to set the styleclass property of the dropdown control to change its background color but none of the following work:

Code: Select all

<p-dropdown [styleClass]="highlight-yellow" [options]="someOptions">
<p-dropdown styleClass="highlight-yellow" [options]="someOptions">
<p-dropdown panelStyleClass="highlight-yellow" [options]="someOptions">
<p-dropdown [panelStyleClass]="highlight-yellow" [options]="someOptions">
I have the following in the css file of the component:

Code: Select all

.highlight-yellow {
background-color: yellow !important;
}
I actually ultimately want to change it dynamically to highly the control under some circumstances by binding the property to a variable on in the component class but I can't even get the styleClass to work by hard coding it in the html.

It works fine for other controls like the text box but the dropdown control doesn' want to honor that property.

Am I doing something wrong?

yigitfindikli
Posts: 235
Joined: 08 Aug 2018, 14:09

12 Feb 2019, 11:25

aflorin wrote:
11 Feb 2019, 20:44
Using PrimeNG 7.0.5

I'm trying to set the styleclass property of the dropdown control to change its background color but none of the following work:

Code: Select all

<p-dropdown [styleClass]="highlight-yellow" [options]="someOptions">
<p-dropdown styleClass="highlight-yellow" [options]="someOptions">
<p-dropdown panelStyleClass="highlight-yellow" [options]="someOptions">
<p-dropdown [panelStyleClass]="highlight-yellow" [options]="someOptions">
I have the following in the css file of the component:

Code: Select all

.highlight-yellow {
background-color: yellow !important;
}
I actually ultimately want to change it dynamically to highly the control under some circumstances by binding the property to a variable on in the component class but I can't even get the styleClass to work by hard coding it in the html.

It works fine for other controls like the text box but the dropdown control doesn' want to honor that property.

Am I doing something wrong?
Hi,
you can use like this;
html;

Code: Select all

    <p-dropdown panelStyleClass="highlight-yellow" ... ></p-dropdown>
component;

Code: Select all

@Component({
    ...
    encapsulation:ViewEncapsulation.None
})
css (your css)

Code: Select all

.highlight-yellow {
    background-color: yellow !important;
}
Best Regards.

aflorin
Posts: 55
Joined: 13 Dec 2017, 19:01

12 Feb 2019, 20:07

Thanks for the reply. I've just tried that but unfortunately, that doesn't work for me.

I can assign the class to text box controls via the class attribute on that same component and they highlight correctly, meaning the component is seeing the css correctly. but the dropdown control still refuses to use it.

Is there a plunker that I can look at or anything else it could be?

Edit: I should also point out I am using the Avalon theme 7.0.0, if that makes a difference.

yigitfindikli
Posts: 235
Joined: 08 Aug 2018, 14:09

13 Feb 2019, 12:28

aflorin wrote:
12 Feb 2019, 20:07
Thanks for the reply. I've just tried that but unfortunately, that doesn't work for me.

I can assign the class to text box controls via the class attribute on that same component and they highlight correctly, meaning the component is seeing the css correctly. but the dropdown control still refuses to use it.

Is there a plunker that I can look at or anything else it could be?

Edit: I should also point out I am using the Avalon theme 7.0.0, if that makes a difference.
You can try "encapsulation:ViewEncapsulation.None" in your component ?

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests