CODEWITHSUNDEEP
jqueryfancyboxmargin
Nate M.
Nate M.

Reputation: 111

Fancybox pushes background by adding a margin-right

My test site: rockitmembers.us

Site is Wordpress.org, not using a plugin.

Code inside header.php is:

<link rel="stylesheet" href="http://www.rockitmembers.us/wp-content/themes/acosmin-v3/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />

This code in footer.php:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.rockitmembers.us/wp-content/themes/acosmin-v3/fancybox/source/jquery.fancybox.pack.js"></script>
    <script>
    $(document).ready(function() {
    $(".iframe").fancybox({
       fitToView : false,
       autoSize : false,
       scrolling : 'no',
    maxWidth        : 820,
    maxHeight       : 600,
    width           : 800,
    height          : 600,
    type            : 'iframe'
        });
    });
    </script>

And this code in my wordpress post for the BUY A LICENSE button:

<a href="http://www.rockitmembers.us/fancyboxtest.html" class="iframe rollover"><span class="displace">Buy A Beat</span></a>

Click the BUY A LICENSE button on the first post (My Reflection). Fancybox functions fine except it adds a 17px margin-right to fancybox-lock which messes up the look of the background, I think it's pushing the scroll bar out? I'm not sure. When you inspect it in Chrome it adds <body class="fancybox-lock" style="margin-right: 17px;"> when the buy a license button is clicked.

I tried the suggestion in this post Jquery Fancybox 2 adds a margin-right? by editing jquery.fancybox.css and taking out overflow-y: scroll; but that still didn't fix the problem.

Any ideas?

Upvotes: 1

Views: 5829

Answers (2)

paul degrand
paul degrand

Reputation: 385

This was my solution to the same issue. After researching a few answers, a combination of my findings did the trick. Within the jquery.fancybox.css, make the following changes to the overlay helper section.

BEFORE

.fancybox-lock {
    overflow: hidden !important;
    width: auto;
}

.fancybox-lock body {
    overflow: hidden !important;
}

.fancybox-lock-test {
    overflow-y: hidden !important;
}

.fancybox-overlay {
 position: absolute;
 top: 0;
 left: 0;
 overflow: hidden;
 display: none;
 z-index: 99999998010;
 background: url('fancybox_overlay.png');
}

.fancybox-overlay-fixed {
 position: fixed;
 bottom: 0;
 right: 0;
}

.fancybox-lock .fancybox-overlay {
 overflow: auto;
 overflow-y: scroll;
}

AFTER 

.fancybox-lock {

}

.fancybox-lock body {

}

.fancybox-lock-test {

}

.fancybox-overlay {
 position: absolute;
 top: 0;
 left: 0;

 display: none;
 z-index: 99999998010;
 background: url('fancybox_overlay.png');
}

.fancybox-overlay-fixed {
 position: fixed;
 bottom: 0;
 right: 0;
}

.fancybox-lock .fancybox-overlay {

}

Upvotes: 1

Tieson T.
Tieson T.

Reputation: 21201

It looks like it really has nothing to do with Fancybox. Looking at your implementation, it looks like your hard-coded widths on the "detail" sections in each <ul> are pushing the edge of the Fancybox over. You should be able to eliminate most of the floats in cartstyles.css, and then you don't need to specify widths on those elements.

EDIT: I don't recommend doing this as a habit, but if the only complaint is the extra margin, try adding this rule to your stylesheet:

.fancybox-lock{
    margin-right:0 !important;
}

!important overrides the normal cascade, and would allow you to override the inline style applied by Fancybox. It would just be masking whatever the real issue is, though.

Upvotes: 1

Related Questions