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.
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.