nprapps / pym.js

Resize an iframe responsively depending on the height of its content and the width of its container.

Home Page:http://blog.apps.npr.org/pym.js/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Pym Chile does height problem

BCalpe opened this issue · comments

Hi,

My CSHTML file has these lines of code
<div id="contentpage"></div> <script type="text/javascript" src="//pym.nprapps.org/pym.v1.min.js"></script> <script> var pymParent = new pym.Parent('contentpage', '@Model.CurrentPage.IFrameUrl?payload=@ViewData["payload"]', {}); </script>
I noticed that when we navigate to an external URL the IFrame Height will be set to the height of the iframe before the navigation occurs. What happens is that if I have a list with many items, where I have to scroll down to see all the content and from here navigate to the external url the iframe will have the height of that previous page with the long list of items. If the previous page has 0 items making the height shorter the external url will be rendered on a shorter height resulting in a problem that only parts of the external url is visible.

To solve this does the external child page have to implement some javascript, pym code to be able to solve this height problem?

Thanks

Yes, if you navigate within the frame, all pages within the Pym parent must also use a Pym child to send their height back, or it won't know how tall to be.

Yes, if you navigate within the frame, all pages within the Pym parent must also use a Pym child to send their height back, or it won't know how tall to be.

What exactly does the external url page have to include in its code to solve this problem?

It would need to include the Pym script, and (at minimum) run new pym.Child() to initialize it. It might also need to call sendHeight() on the child object if the code inside dynamically changes height outside of a standard window resize.