Horizontal Scrollbar Appearing in Firefox

I've also noticed this. I will see if i can figure it out.

any progress on this?

I actually haven't had a chance to look at it. I just revert backed to using thickbox.

I've had a quick look at this and whilst the overlay is originally set to width:100%; later on it's set to a calculated pixel width.
I've created a patch that keeps the overlay width at 100%. This seems to fix things for FF. Tested in IE6, IE7, FF, Chrome and Safari and seems to work fine.

Patch resolved the issue for me. Good stuff.

Glad it helped you out budda.
I've looked again at this issue and found that whilst the above patch worked it wasn't particularly graceful. This version corrects the code used to calculate the width of the window.

Tested in IE6, IE7, FF 3, Chrome and Safari and working like a trooper.

I tried "lightbox2_ff_hbar_fix_2.patch," and it fixed the problem. I would appreciate it if this was applied to the next Lightbox2 release.

I'd be also interested in getting this patch applied to one of the next releases.

bump

It has been months since this patch was released and tested. Perhaps a module maintainer could either commit it, or refuse to commit it and give a reason, but let's get some closure here either way, please.

Committed, thanks!!

Hey, sorry to be a pain, but i cant get either of these patches to apply. The first one gives me 'Hunk#1 failed at 662', and the second is the same except '924'. Only have done patches a few times, is it obvious to anyone what I'm doing wrong?

I've tried the newest lightbox version as well as with the patch referenced in this thread, and I still have the issue of scrollbars in Firefox. Works fine in IE, but horizontal and vertical scrollbars in firefox regardless of width/height specified.

I'm using lightbox for video links with "lightvideo"

Same here ;-(

Unfortunately I don't have the knowledge to properly fix this issue, but I needed a quick fix urgently, so I made a quick little workaround that seems to work for me while we wait for someone who knows how to fix this bug.

In lightbox.js (latest version), altered this line on 508:

Lightbox.resizeContainer(parseInt(container.width, 10), parseInt(container.height, 10));

to this:

Lightbox.resizeContainer((parseInt(container.width, 10) + 10), (parseInt(container.height, 10) + 10));

Ditto on this bug. The bug has been around for a while, what's the ETA on a new release?

Unfortunately the code change in #17 doesn't work for me. Has anyone got another solution?

edit: Patch in #7 sorted it. Can this be committed so I don't have to remember I've changed it come update time :)

Just discovered an issue - bizarrely, using the patch in #7 kills ckeditor in firefox on Mac completely.

The same bug here drupal 6.16, lightbox2 (dev from March 8, 2010 - 01:08) and FF 3.6. In Google Chrome 4.0.249.89 also scrollbars.

I haven't tested this outside of FF3.6, but a simple fix that's working for me.... is to open sites/all/modules/lightbox2/css/lightbox.css and change the position of #overlay (line 157) to fixed:

#overlay {
position:fixed; /* *****not absolute**** */
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #000;
}

Be sure to clear your caches, etc... to see the change. FF likes to hold on to CSS files sometimes. Especially inside Drupal.

Not work for me - not for Gecko/20100115 Firefox/3.6 nor for Chrome 4.1.249.1036

Tried #7, #17 and #22 without any luck.

So I just added this in the theme CSS file:

#lightboxFrame{
overflow-x: hidden;
overflow-y: hidden;
}

That did the trick to hide the scrollbars

Crazy.... I have 20100115 myself. I'll test further.

As nothng else worked for me I did change the following:

lightbox.js Line 665
from
$('#overlay').css({'height': pageHeight + 'px', 'width': arrayPageSize[0] + 'px'})
to
$('#overlay').css({'height': pageHeight + 'px', 'width': (arrayPageSize[0]-16) + 'px'});

which removed the Srollbar for me. I assume 16 works just for my theme, so this is a bad solution.

Ii my theme this does not work. Problem still exists in FF Firefox/3.6.3.

Temporary solution:
in lightbox.js around line 552
Change:
$('#modalContainer').css({'width': imgWidth, 'height': imgHeight});
To:
if ($.browser.msie) {
$('#modalContainer').css({'width': imgWidth, 'height': imgHeight});
}
else {
$('#modalContainer').css({'width': (imgWidth+17), 'height': imgHeight});
}

Look OK in FireFox 3.6.3, Chrome 4.1.249.1045, Internet Explorer 8.0.7600.16385 and Safari 4.0.5 (531.22.7).

#28 doesn't work for me.

I see the problem, but I don't know the solution.

In js/lightbox.js, the code below (line 931, lightbox.js,v 1.5.2.6.2.114 2009/01/05 14:21:52) shows what is executing, and what should be executing:

    if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac
      xScroll = document.body.scrollWidth;
      yScroll = document.body.scrollHeight;
    }
    else if (window.innerHeight && window.scrollMaxY) {
      xScroll = window.innerWidth + window.scrollMaxX; // GETS HERE - WRONG
      yScroll = window.innerHeight + window.scrollMaxY;
    }
    // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari.
    else {
      xScroll = document.body.offsetWidth; // SHOULD GET HERE
      yScroll = document.body.offsetHeight;
    }

Looks like nobody can fix this irritating issue, including module's maintainer?
Who is affected? All.
Is it reproducible? Yes.
What is the problem? Who knows...

My guess, OnkelTem, is that all the variability in our collective environments -- all the different css cascades from themes, modules, customization and browser platforms -- is contributing to a quick, simple solution here.

#28 also did not work for me. Possibly related to http://drupal.org/node/795948 ?

subscribing

*This is not a long term fix, nor is it probably the 'best' fix, but it worked for me and for the theme that I have set up.

I just added this to my 'master' stylesheet:

#overlay {
width: 100% !important;
height: 100% !important;
}

Tested in FF 3.6.3, Safari 4.0.5, Chrome 5.0.375 and IE8

Subscribing - same issue and none of the above solutions are affecting the modalContainer size. It seems if I can just get the script to add 20px to the modalContainer height, all will be well.

I tried the different CSS solutions proposed. #24 worked for me, the others did not.

Edit: actually my issue is different: #564416: Scrollbars in lightvideo in FF 3.5. Someone had marked it as a duplicate of this so I commented here, but it is a different problem.

after trying with the above and nothing works, I found the fix, at least for me.

I add this line in my lightbox.css or (lightbox-alt.css)

.emvideo-modal-iframe {
overflow: hidden;
}

This is lightbox using video but might apply to images as well. You just have to
find for the right class to add to your css file.

When you find the right class, just add overflow:hidden in your css
to remove horizontal and vertical class.

I use this in my style.css

#lightbox #modalContainer {overflow:hidden;}
#lightbox #imageData #bottomNav {height:20px;}
#bottomNavClose {margin-top:0px; padding-top:0px}

Work great

I can't reproduce this. If it's still an issue with the new release then please open a separate ticket, this one is now closed.