Css customization

[valeri879]

I can't customize css inline styles

[diegofsza]

What are you precisely trying to do?

[valeri879]

For ex. change border color or shadows

[diegofsza]

Ok. Using the /deep/ shadow-piercing descendant combinator used to work, but I believe it is deprecated right now, and support being removed from many browsers. Anyway, this still works with chrome for example:

<iq-select2 [css]="'test'"
                    [dataSourceProvider]="dataProvider"
                    [iqSelect2ItemAdapter]="adapter"
                    [selectedProvider]="getItems"></iq-select2>

>>> .test { border: 2px solid #000; box-shadow: 0 0 5px #f00; }

I think it will be needed a whole review of the styling of the component, so that we can integrate better with the apps using it. I don´t really know right now which is the best way to do that, but will try to find it out.

[saithis]

Other projects like angular material or primeng provide their (s)css separated from the component and you have to include it in the angular-cli.json. But then all css classes of the component must have very unique names to avoid conflicts.

This way it would also be possible to provide different (s)css themes to integrate ng2-iq-select2 with bootstrap, angular/material, primeng, etc.

[valeri879]

@saithis I know that but with custom stylesheet, I can't override inline styles without CSS !important

[saithis]

@valeri879 my comment was meant for @diegofsza. If the ng2-iq-select2 styles come in a separate (s)css file instead of being embedded into the component, then you could either extend the scss or throw it away and write your own. Thats how the above mentioned projects do it.