Search code examples
cssfancyboxfancybox-2border-box

Fancybox close button is cut off when using Foundation 3 and CSS border-box

When using box-sizing: border-box, it causes the "close" button to be cut off. This is especially the case when using Foundation 3 by Zurb.

The code that seems to cause issues for fancybox is this:

* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

Now, maybe the author needs to take border-box into consideration when doing the calcs, but I'd like to know if there's an easy way to override the behavior with CSS.

Here's a Fiddle that demonstrates what's happening. You can see how the close button gets cut off. http://jsfiddle.net/jonthomas/SxZuR/4/

Also, here's the issue on github: https://github.com/fancyapps/fancyBox/issues/311

Solution

  • The author of the plugin provided the CSS necessary to fix this. Use the following CSS to force fancybox and all of it's child elements to use content-box for box-sizing.

    .fancybox-wrap, .fancybox-wrap * {
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
}​

    See it working here: http://jsfiddle.net/jonthomas/ut93u/2/

    He also mentions to make sure you have the latest code. I have 2.0.6 and the above code fixes the issue fine. However you can always grab the latest code here: https://github.com/fancyapps/fancyBox/zipball/master