Basic idea of what I'm trying to do: Place GoogleDocs Viewer (GDV) inside Bootstrap modal, hiding the controlbar from the GDV, while centering the modal on the page without losing the inherent responsiveness expected from Bootstrap.
I've got everything working, just not 100% together. Centering the modal was easy. Doing the <IFRAME> while hiding the controlbar was easy. Making it responsive, took me about 10 days of rewrite after rewrite to make it work, is good. Putting it all together, not so much. The problem is with applying the responsive sizing when the screen is sized that the width dictates the sizes of everything else.
Rather than fill this post with the code, I just created a JSFiddle of the code in action:
Edit fiddle - JSFiddle
I know the problem is showhow caused by the line
Code:
modalMarginTop = (windowY - modalY) / 2;
So long as I specify a fixed value, it gives no problems, but it should be calculated the same way as the modalMarginLeft value is when the sizing is controlled vertically, except for the y-axis instead of the x.
If you remove the last two lines of the function, which set the margins, you can see that the responsiveness works perfectly. Put the margin-left back in and it still works great. It's just the margin-top during height is determined by the width.