Style conflict with Bootstrap 3

  • Profile Image
    maddesign
    Asked on September 15, 2014 at 08:17 AM

    Hey guys,

    I have a low-priority issue here that I've been noticing lately. It seems that the form lightbox that you all are using has a conflict with the Bootstrap 3 framework. I've attached a screenshot showing what occurs each time I add a lightbox to a site that's using this framework.

    Maybe you can take a look or know a quick-fix?

    Thanks,

    Trent

  • Profile Image
    egeg
    Answered on September 15, 2014 at 08:53 AM

    Hi there, 

    Is there a live link that we can investigate this problem on?

    Off the top of my head, it looks like some default bootstrap style is breaking how our lightbox wrapper looks. The actual form cannot be the issue here so it has to be the wrapper.

    Let us know and we'll get this sorted out asap.

    Thanks.

  • Profile Image
    maddesign
    Answered on September 15, 2014 at 09:28 AM

    Sure thing. Here's a link for you: http://maddesign.biz/qa/handh/ftr/form.html

  • Profile Image
    egeg
    Answered on September 15, 2014 at 11:19 AM

    Hi there,

    As I suspected, this happens because bootstrap defines box-sizing: border-box to all elements in the page.

    To prevent this from happening, include the following css in the page that has the lightbox form.

    .jt-title {
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
    }

    Please let us know if there's anything else we can help you with.

    Cheers!