Fancybox does not account for scrollbar width

Question

Been trying to figure this out, but can't come up with a good solution and can't see Fancybox already got the solution for this? Correct me if I'm wrong.

The problem: I have a Fancybox that opens an iFrame where the user goes through a couple of steps (new pages). Some of them have quite a lot of content, which gives me scrollbars, and some doesn't. The problem is that the Fancybox doesn't account for the scrollbar width, and gives me x-scrollbar as well.

Solutions

• I can set the Fancybox width to something + 20, thats about the size of a scrollbar, but not in every browser, and it would give me some weird spacing if theres no scrollbar.
• I could possible add overflow: hidden somewhere, but that would crop my content too much.
• I could write some JS my self to figure out if the scrollbar was in the way.
• Or I could add overflow-y: scroll, which would show a scrollbar all the time, but somehow not in every browser which would give weird spacing too.

That is some of the solutions I could think of, but none is good imo. What would you guys do?

EDIT After a chat with Rlemon, I decided to put a container around the content that had fixed width elements, and set overflow-x: hidden on body. It all means that I can hide whatever is too much because I know the fixed widths elements is inside and is visible.

Answer 1

After a chat with Rlemon, I decided to put a container around the content that had fixed width elements, and set overflow-x: hidden on body. It all means that I can hide whatever is too much because I know the fixed widths elements is inside and is visible.

Answer 2

Maybe only suppress the horizontal scrollbar:

overflow-y:hidden;