search

Innqube / ng2-iq-select2

Angular 2 native select 2 implementation based on bootstrap 3
https://innqube.github.io/ng2-iq-select2-demo/
26 stars 22 forks source link

Css customization #48

Open valeri879 opened 7 years ago

valeri879 commented 7 years ago

I can't customize css inline styles

diegofsza commented 7 years ago

What are you precisely trying to do?

valeri879 commented 7 years ago

For ex. change border color or shadows

diegofsza commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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

saithis commented 7 years ago

@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.