Home/ Questions/Q 8260727
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T03:09:43+00:00

When using box-sizing: border-box, it causes the close button to be cut off. This

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0