Can't set styleclass on dropdown

[aflorin]

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]

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]

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]

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 ?