CSS conflict with BootStrap4

Resolved Marie Comet
(@chaton666)

2 years, 5 months ago
Hi !

First thanks for the latest update which include option for collecting IP address.

I found a little CSS conflict with BootStrap 4 and VSCF :
Input for accept data collect (privacy) has css class custom-control-input, in BootStrap 4, this class has rules :
```
position: absolute;
z-index: -1;
opacity: 0;
```
which means the input isn’t visible in the form.
You can see an example on my website, where my theme use BootStrap 4 :
https://mariecomet.fr/contact/
I went arount the problem adding (dirty) CSS fix, but you can see in debugger browser tool that whithout that fix, input is hidden.

The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)

Marie Comet
(@chaton666)

2 years, 5 months ago
Here is the BootStrap documentation for this rule : https://v4-alpha.getbootstrap.com/components/forms/#checkboxes
- This reply was modified 2 years, 5 months ago by Marie Comet.
Plugin Author Guido
(@guido07111975)

2 years, 5 months ago

Hi Marie,

Thanks for letting me know. I myself don’t have a theme which uses bootstrap so I did not notice this myself.

Right no I don’t fully understand why they have used this CSS but I will look into this further next week and will update plugin.

Guido

Plugin Author Guido
(@guido07111975)

2 years, 5 months ago

I now understand why it doesn’t show up, it’s because the checkbox is not inside a label tag, please check this thread on Github. Guess it has been changed in newest Bootstrap version. I still not fully understand why they did this, but I will update plugin next week. I might wrap whole input in a label tag, or add a CSS fix only.

Guido
Plugin Author Guido
(@guido07111975)

2 years, 5 months ago
Hi Marie,

Most easy fix is some CSS:
```
#vscf .form-group .custom-control-input {position:static; z-index:auto; opacity:1;}
```
Can also change the CSS class to .form-check-input but in this case I should also add a CSS fix to make the checkbox visible again.

What do you think about this?

Guido
Marie Comet
(@chaton666)

2 years, 5 months ago

Hi Guido,
Thanks you for the CSS fix.
For me it’s not a problem to apply that fix in my theme if you don’t want or can’t make change inside the plugin itself :).
Now we know why it doesn’t show up, if someone else use Bootstrap.

Plugin Author Guido
(@guido07111975)

2 years, 5 months ago

Bootstrap V4 offers CSS to create a fully customized checkbox using a :before and :after element. That’s why they hide the default checkbox. But in order to support that I have to make some changes to the checkbox and add some additional CSS classes. I have to look into this further. So that’s why the CSS fix is the most easy solution right now 😉

Guido
Plugin Author Guido
(@guido07111975)

2 years, 4 months ago
Hi Marie,

Have updated plugin few moments ago. Decided to add the CSS fix. Most easy for me.
```
/* Fix for privacy checkbox when using Bootstrap */
#vscf .form-group .custom-control-input {position:static; z-index:auto; opacity:1;}
```
Guido
Marie Comet
(@chaton666)

2 years, 4 months ago

Hi Guido,
Thanks you for telling me 🙂
I’m closing this topic.

Marie.

Plugin Author Guido
(@guido07111975)

2 years, 4 months ago

You’re welcome.

But could you tell me if this fix is enough? So could you check your site after updating plugin?

Guido

Marie Comet
(@chaton666)

2 years, 4 months ago

Hi Guido,
Juste updated VSCF, and yes it works :
https://mariecomet.fr/contact/

Thanks you !

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘CSS conflict with BootStrap4’ is closed to new replies.

WordPress.org

CSS conflict with BootStrap4

Views