1

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

3 Answers 3

5

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
2

Thanks a lot for the solution. A great help. One thing though. In my installation fancybox-wrap is an ID, not a CLASS. So I use:

#fancybox-wrap, #fancybox-wrap * {
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
}
1

I tested the jsfiddle and the issue doesn't show up in Firefox (14.0.1) but in Chrome (20.0.1132.57 m)

The workaround I found is adding this CSS inline declaration (AFTER the fancybox css file is loaded):

.fancybox-wrap {
 overflow: visible !important;
}

NOTE : this for fancybox v2.0.6+

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.