[Bug]: Toggles are off-center

[ThomasHawaii]

Expected Behavior

I'm pretty sure that it's not a bug in CookieConsent, but I still have to ask here because I don't think I can solve it any other way. As you can see in the screenshot, the toggles are not exactly in the middle of the lines, but a bit too high. The checkmarks and crosses are also slightly misplaced as a result. The sub-toggles are also not in the middle of the rows, but a bit too high.
Is there a way in the CSS (locally installed) to set the toggles a bit further down (with margin or padding)? The bug is probably caused by the fact that the CookieConsent CSS is not compatible with Bootstrap v4.4.1. If I deactivate Bootstrap CSS, the toggles in CookieConsent are correct...

Current Behavior

Toggles misplaced

Steps to reproduce

Try CookieConsent Css together with Bootstrap 4.4.1

Proposed fix or additional info.

No response

Version

3.0.1

On which browser do you see the issue?

Chrome

[peaemaye]

It's because bootstrap sets vertical-align: middle for all svg elements. You can add a more specific rule in your CSS for cookie consent, something like:

#cc-main svg { vertical-align: initial; }

[ThomasHawaii]

Thx a lot peamaye, your advice fixed my problem. Besides I also have the problem that the switches themselfs are 3px to high (they are vertically off center and out of the line with "2 Google-Dienste", look at the screenshot above). I solved it by adding the following custom css: #cc-main .toggle__icon{margin-top:3px}. Is there a more elegant solution for this? Dont get me wrong, this is a really minor topic and I am good with my workaround. I just want to do everything right. Thx in advance :)

[orestbida]

@ThomasHawaii can you please create a demo somewhere? So that I can see what's the best approach to fix this.