CSS conflict with BootStrap4

  • Resolved Marie Comet

    (@chaton666)


    6 years, 9 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)
  • Thread Starter Marie Comet

    (@chaton666)

    Here is the BootStrap documentation for this rule : https://v4-alpha.getbootstrap.com/components/forms/#checkboxes

    • This reply was modified 6 years, 9 months ago by Marie Comet.
    Plugin Author Guido

    (@guido07111975)

    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)

    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)

    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

    Thread Starter Marie Comet

    (@chaton666)

    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)

    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)

    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

    Thread Starter Marie Comet

    (@chaton666)

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

    Marie.

    Plugin Author Guido

    (@guido07111975)

    You’re welcome.

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

    Guido

    Thread Starter Marie Comet

    (@chaton666)

    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.