Cannot override CSS style from primeng in p-dropdown component

[alejandroJMP]

[x ] bug report => When creating CSS styles for p-dropdown that styles are been applied not even when trying to override them with primeng classes.

Current behavior

I added style classes for the p-dropdown component and there are not being applied correctly to the component, there are seen reflected in the component but not in the expected way, we have tried to create CSS classes to override the primeng styles and apply them directly to the components div and all the auto-generated child div´s created by primeng.

We have tried for other primeng components and the style do override when being applied directly to component or its auto-generated child, but for this component in particular its not working properly.

The style that we applied is a simple " border-left: 5px solid green ", and the behavior is just applying in half the input component literally, so its not as expected.

Angular version: 2.1.2

PrimeNG version: 1.1.4 & 1.0.0-beta.16

Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX ]

Language: [all | TypeScript X.X | ES6/7 | ES5]

[cagataycivici]

Where do you write your custom CSS? Is your ViewEncapsulation = NONE if you are using styles or stylesURL of @component. If not, try with ViewEncapsulation.None as Angular adds scoping that may cause this. It is not really PrimeNG related if so.

What is your custom CSS?

[alejandroJMP]

Hello,

Yes ihave tryed applying VIEWENCAPSULATION = NONE, but it still gives me that issue...

Is there a workaround that we can use ?

Thanks, Best Regards,

Alejandro Martinez Polanco, Software Developer, Email: ajmtz@mx1.ibm.com Cell: (+52) 346-103-1589

[cyberrranger]

same problem,

our workaround:

css: body .ui-datatable table tbody tr td { overflow: visible; }

the result (ultimate template)

[alejandroJMP]

Yes i have tried this, applying this class:

.ui-state-default, .ui-widget-content .ui-state-default { border-left: 5px solid green; }

I have adapted this class with the p-dropdown component :

.ui-dropdown, .ng-valid, .ui-state-default, .ui-widget-content .ui-state-default { border-left: 5px solid green; }

But it still does not work, it applies the style but not correctly, like the other inputs in html.

Screenshot:

Is there a way that i can handle this.

Thanks, Best Regards,

Alejandro Martinez Polanco, IBM Software Developer, Email: ajmtz@mx1.ibm.com Cell: (+52) 346-103-1589

[pmeems]

We have the same issue:

The dropdown is required, hence the green line. And like Alejandro reported it only has half the height. And we also tried numerous CSS changes but no luck.

[pmeems]

Any progress on this issue?

[alejandroJMP]

Not at all...

[ghost]

Any update here? I have the same issue, making the form unusable for data entry when needing to highlight a required field.

[seesharpguy]

You have to apply the valid/invalid style to the first child div, and remove the border from the p-dropdown element.

`p-dropdown.ng-valid[required] > div, p-autocomplete.ng-valid.required > div { border-left: 5px solid $ng-valid; / green / }

p-dropdown.ng-invalid:not(form) > div { border-left: 5px solid $ng-invalid; / red / }

p-dropdown.ng-valid[required], p-dropdown.ng-valid.required { border-left: 0 none; }

p-dropdown.ng-invalid:not(form) { border-left: 0 none; }`

[alejandroJMP]

Great!

It works!!

Thanks for the help

[ahelord]

Someone trying to change this class ui-dropdown-label inline

[cili93]

Just select it from your base styles file

For example, in Angular, I placed this in styles.scss to apply border-radius to dropdown

body .ui-corner-all {
    border-radius: 0.4rem;
}

I hope it helps, if anybody still needs this 😄

[Sri-96]

can we right a inline styles for the primeng buttons

[BenSri6]

yes