Bootstrap 3.3.2 - unwanted scrollbars

[K4T]

Hello, featherlight have problem with the newest Twitter Bootstrap v3.3.2. You can see it here: http://jsfiddle.net/k5Lwxf1L/1/

Notice additional scrollbars. If you don`t see them than change viewport size and look what will happen.

Solution: Overwrite CSS with those rules (just paste it into provided fiddle):

@media all { 
 .featherlight .featherlight-content {
  padding: 0;
  border: none;

  min-width: inherit;
 }

 .featherlight .featherlight-image {
    max-width: 100%;  
    border: 20px solid #fff;
 }
}

@media only screen and (max-width: 1024px) {
 .featherlight .featherlight-content {
  padding: 0;
  border: none;
 }
}

Problem is probably caused by box-size reset in current version of Bootstrap. It is a bit different than in older Bootstrap.

Your _onResize method, line: https://github.com/noelboss/featherlight/blob/master/src/featherlight.js#L489

Variable w have always wrong value, cause of wrong value returned by .css('width').

[gilcel]

Hmm, I thought it was more a problem of jQuery 1.8.0+ ? I've used bootstrap 3.3.2 along with jQuery 1.7.0 - 1.7.2 and no scrollbars. However using jQuery 1.8.0 or 1.11.2, the vertical scroll-bars appears (Firefox 35+ and Safari 7+ tested)... Anyone can confirm ?

[K4T]

I think it is not a jQuery problem, you can verify it by changing jQuery version on jsFiddle, I also tested other browsers like IE11, Opera etc. All of them display scrollbars. My friend can confirm it too.

[danimalweb]

I had this problem too. Thanks for your css fix! Saved me some time :)

[gilcel]

Thank you K4T for your fix which works nicely, and it's effectively a bug which shows up with Bootstrap 3.3.x. With your fix it works even with jquery 1.11.2 and bootstrap 3.3.4!

[luads]

+1 :+1:

Solved my issue with big images, thanks :)

[arnisjuraga]

Nice, K4T - this fixes for big images, but still - if I use "gallery", because of navigation buttons, there are still vertical scroll for large images.

[noelboss]

Is this issue a sole issue of Bootstrap, or does it affect (i.e. large images) also standalone FL instances?

[noelboss]

The proposed solution does only work with images (and iframes)... Test it on src/index.html with the other options...

[Galactopus]

This is not a Bootstrap problem. It's a jQuery problem with versions later than 1.7.2. Just delete the Bootstrap files from your fiddle and try re-sizing vertically and you'll get a scrollbar.

K4T's css works to a point but it will start to distort the image at smaller sizes.

Unfortunately using jQuery migrate doesn't appear to help.

[cngodles]

Adding this to a non bootstap project fixed the scrollbars immediately.

[gabor-braun]

For me, a fix was

.featherlight-inner {
  margin-top: 0px;
  margin-bottom: 0px;
}

to override the following rules of Bootstrap:

img {
    margin-bottom: 24px;
    margin-top: 17px;
 }

Perhaps the stylesheet of FL should set all padding and margin values.