apply background color

[troddick]

Great tool. Thanks! I have this switch on a div that is black and am having problems adding a white background to the inner div with classes 'bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-animate bootstrap-switch-off bootstrap-switch-normal' I can add it in the browser debugger 'background: white' and it works, but trying to override it in my code does not. See image for example.

Thanks.

[ovsleep]

Unfortunately, no. The onColor/offColor property sets a css class on the component, not a color. It could be a nice update (this was poor design).

Anyway, there's a workaround. You could override this css classes in your style.css. So, for example you want to use the color '#5bc0de' for the on backgroud, you could set the onColor='red' and in your style.css add this:

.bootstrap-switch-danger{ background: #5bc0de !important; }

The mapping between the color names and classes are these:

blue - bootstrap-switch-primary sky-blue - bootstrap-switch-info red - bootstrap-switch-danger yellow - bootstrap-switch-warning green - bootstrap-switch-success gray - bootstrap-switch-default

This way you could set the on/off color to any of those names and just override the corresponding css class to set your custom color.

[troddick]

Thanks for the quick reply. Too quick... lol. I think you responded before I had a chance to save the changes I made to the question. I realized the color I needed (#5bc0de) is actually sky-blue. So it worked out. Instead of trying to delete my issue, I changed my question to my next issue. Sorry about the confusion. What about setting a background color? (see reworded original issue question above).

Thanks

[ovsleep]

Haha.. cool, no problem. If you don't mind, can you leave the original question in this thread? There might be others with the same issue and I would like to leave the workaround there.

About the background, seems there's a missing style in the component, I'll try to upload a fix for it soon. For now you could add this to your style.css:

.bootstrap-switch-container{ background: #fff !important; }

[troddick]

Sure thing. Sorry about that. Original question was: Is there a way to use custom onColor / offColor instead of the presets? Like: [onColor]="switchOnColor" in the html, and switchOnColor = '#5bc0de'; in the component.

[smlombardi]

We really need a simple way to set the colors to hex colors. The switch states and the borders.

[ovsleep]

I'm not sure about this one @smlombardi . You can already set the main class for the control, and you have 6 possible classes. Which makes 6 possibles color combinations (modifying the different css classes). I can't think of an scenario where I would want to set my controls color from my code, IMO seems like a bad practice.
Can you let me know why modifying the css isn't working for you? Maybe I'm missing something here.

[smlombardi]

I was able to modify the CSS using !important, which I generally prefer not to do.

I was not able to set the border color on :hover, though.

[ovsleep]

I've been looking into this and I can't find a good way to do it. Just exposing properties to change background colors wont work, because you'll want to change font colors, so there's a few other properties to expose. Plus if you want to change the borders and the borders on hover, those are more properties. I think this will end up in a bunch of unmanageable properties. I rather stick to css classes, but can't find an easy way to let you override them. By design Angular encapsulates everything inside a component. The workaround I found is to set the component encapsulation to "ViewEncapsulation.None" (I did this in the latest version). This will leave the component's styles untouched so it should be easier to override them. You'll just need to override them in your styles.css, but you need to make sure that your styles.css is placed at the bottom of the html, otherwise you'll still need the !important Here is a copy of the css used in this component.