1

I'm using fancybox 3 to display a page (Page A) in an iframe. On a local server (running in Chrome) this worked great; however, online it does not - the iframe gets really narrow, and a quick inspection shows that Chrome registers fancybox-content width as 0. (It works fine in Safari.)

When I take "margin-left" styling out of one of the SVGs in Page A, the iframe appears normally again. However, this isn't a viable solution because Page A content doesn't display properly without the margin-left styling.

Here's the offending page; the box in question is the first one on the left ("Growing Bookshelves"). The page seen in the iframe is here.

Things I've already tried:

  • Change width and height of frame based on this post and many, many others, using both CSS and JavaScript
  • Changing various parts of Page A (tried to use "position:relative" and "left:xx%" instead of "margin-left", tried to put the svg in span/div; tried to change "display" style of body to block and inline-block)

I've spent way too long on this so any help is appreciated!

P.S. I know the code is ugly, and I'm probably not doing everything exactly as it should be done according to convention. Just trying to pull some things together.

Janie
  • 11
  • 1
  • Could you, please, grab the source code of v3.3 from here - https://codepen.io/fancyapps/pen/PEqJvL - to see if it works better? Also, I think that your problem is more likely to be related to the floating elements. Try setting `overflow:hidden` to the parent. – Janis Mar 17 '18 at 10:11
  • Hi Janis - I'd tried setting overflow to hidden, but it blocked part of the page from being seen. Fixed by changing width of SVG - you're right in that overflow was the issue; just had to change width instead of hide overflow to make it render alright. Thanks so much! – Janie Mar 17 '18 at 10:14

1 Answers1

0

Resolved!

CSS margins can make an svg/div/etc go beyond the 100% width. I changed the width of the SVG from 100% to 33% and just redrew the dimensions since it got smaller.

Janie
  • 11
  • 1