The close button for Fancybox gets cropped out when Foundation 3 and CSS border-box are used together

Question

The close button for Fancybox gets cropped out when Foundation 3 and CSS border-box are used together

When the box-sizing is set to border-box, it can sometimes cut off the "close" button. This issue seems to be more prevalent when using Foundation 3 by Zurb.

The snippet of code that may be causing conflicts with fancybox is as follows:

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

While the author might need to consider border-box in their calculations, I am curious if there is an easy CSS override for this behavior.

This Fiddle demonstrates the problem where you can observe how the close button gets cropped: http://jsfiddle.net/jonthomas/SxZuR/4/

You can also find more information about this issue on github: https://github.com/fancyapps/fancyBox/issues/311

css fancybox fancybox-2 border-box

Answer 1

Answer №1

The creator of the plugin shared the necessary CSS code to resolve this issue. Simply add the following CSS to enforce the use of content-box for fancybox and its child elements.

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

View the solution in action here: http://jsfiddle.net/jonthomas/ut93u/2/

The creator also advises ensuring that you have the latest version installed. I am using 2.0.6, and the provided code effectively resolves the issue. However, you can always access the newest version here: https://github.com/fancyapps/fancyBox/zipball/master

Answer 2

The creator of the plugin shared the necessary CSS code to resolve this issue. Simply add the following CSS to enforce the use of content-box for fancybox and its child elements.

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

View the solution in action here: http://jsfiddle.net/jonthomas/ut93u/2/

The creator also advises ensuring that you have the latest version installed. I am using 2.0.6, and the provided code effectively resolves the issue. However, you can always access the newest version here: https://github.com/fancyapps/fancyBox/zipball/master

Answer 3

Answer №2

Appreciate the solution provided, it was incredibly helpful. Just wanted to note that in my specific installation, fancybox-wrap is actually an ID and not a class. As a workaround, I utilized the following CSS:

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

Answer 4

Appreciate the solution provided, it was incredibly helpful. Just wanted to note that in my specific installation, fancybox-wrap is actually an ID and not a class. As a workaround, I utilized the following CSS:

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

Answer 5

Answer №3

After testing the jsfiddle, I discovered that the issue only appears in Chrome (20.0.1132.57 m) and not in Firefox (14.0.1).

To solve this problem, I came up with a workaround by adding the following CSS inline declaration (AFTER loading the fancybox css file):

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

NOTE: This solution is specifically for fancybox v2.0.6+

Answer 6

After testing the jsfiddle, I discovered that the issue only appears in Chrome (20.0.1132.57 m) and not in Firefox (14.0.1).

To solve this problem, I came up with a workaround by adding the following CSS inline declaration (AFTER loading the fancybox css file):

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

NOTE: This solution is specifically for fancybox v2.0.6+

The close button for Fancybox gets cropped out when Foundation 3 and CSS border-box are used together

Answer №1

Answer №2

Answer №3

Similar questions

Issues with webpage responsiveness, width not adjusting correctly

Is there a way to eliminate padding and increase the size of images in mobile view?

I'm struggling to understand how to interpret this. The v-tab function seems to be generating a button with various properties, but I'm unsure which specific property is related to

Looking to adjust the alignment in BootsFaces? Want to move the final link of the navbar to the right corner?

Tips for positioning a label within the span element wpcf7-form-control-wrap

css position:absolute stacked

Unable to append Jquery attribute to a div component

Extract the content from the span element on Whatsapp Web

Problem with selecting odd and even div elements

What is the best way to arrange two divs inside a main div so they remain fixed in place at all times?

The CSS child selector seems to be malfunctioning as it is affecting all descendants of the specified type

Is there a way to position this Flex-Box Item beside the image?

How about this: "Leveraging the power of #IEroot to achieve a

Exploring creative methods for incorporating images in checkboxes with CSS or potentially JavaScript

Adjust the size of H1, H2... tags based on their own specifications, rather than the surrounding element

Creating multiple div elements with changing content dynamically

How to eliminate a hyperlink from an HTML element with the help of JQuery

Tips for converting plain text output into HTML tags

Navigating on a stationary object: CSS Styling

Comparing currency to double in handlebars: a comprehensive guide