overflow scrollbar adding margin?

Forum Moderators: not2easy

Message Too Old, No Replies

overflow scrollbar adding margin?

LifeinAsia

3:25 am on Dec 7, 2015 (gmt 0)

I have an image carousel with thumbnail previews. All looks well if there are just a few images. The thumbnail area is fine with more than a few, as the overflow just scrolls automatically. However, when the scrollbar gets added, a margin is being added to the right of the main image. I inspected the resulting CSS for the divs surrounding the main images, and I can't find anything adding the margin. Is this regular behavior?

Without:

With:

lucy24

3:45 am on Dec 7, 2015 (gmt 0)

Is the added width identical to the width (in pixels) of a scrollbar? It sure looks suspiciously similar. Is it identical on all browsers and/or all devices?

What if anything do each of the elements' respective CSS have to say about "overflow:"?

What happens if you intentionally force a vertical scroll on one element or the other?

Hoople

5:01 am on Dec 7, 2015 (gmt 0)

Looks like you might be letting the 'browser figure it out' on properties not set to a number? Reset CSS in effect?

Has the parent object padding be set? Child object padding, margin, outline and border set?

Does this happen on all popular browsers or just your example?

not2easy

4:54 pm on Dec 7, 2015 (gmt 0)

I inspected the resulting CSS for the divs surrounding the main images, and I can't find anything adding the margin.

Sharing that CSS information here might help you get more answers and fewer questions.

_{just sayin'.}

LifeinAsia

5:03 pm on Dec 7, 2015 (gmt 0)

Is the added width identical to the width (in pixels) of a scrollbar? It sure looks suspiciously similar.

My thoughts exactly.

It sure looks suspiciously similar. Is it identical on all browsers and/or all devices?

tested on FF, Chrome, IE. Didn't check on mobile yet (by that time, I'd already spent enough time on the issue and needed to do something else...).

elements' respective CSS have to say about "overflow:"?

Thumbnail div is auto, most others aren't specified. The container div for the full-sized images is using the default style- hidden.

Just for fun, I added width:100% on img inside that (full-sized image) container, and that seems to have fixed the issue.

Thanks!

LifeinAsia

5:08 pm on Dec 7, 2015 (gmt 0)

Sharing that CSS information here might help you get more answers and fewer questions.

i would have done that originally, except that the CMS currently adds a number of divs around those elements, and posting all the styles would have made for a long post. My original question was simply if anyone had ever seen this issue scrollbars being added to one div adding a margin to successive divs.

not2easy

6:30 pm on Dec 7, 2015 (gmt 0)

Good to know it was resolved. I looked at this last night and the "scrollbar width" suggestion offered by lucy24 looked like the best guess, but I didn't see a way to give more help without more specifics so I was curious whether you had found a fix. Thanks :)