Adapt course in iframe or frame is not responsive

[LukaszGrela]

I need to load course through the iframe or frameset (tried both) but when the menu behaves correctly and adjusts itself to the size of the device dimensions, the page changes to be something much larger than it is in reality.

This happens in the UIWebView in the iPhone. Is there, in the Adapt code, bit of code that is changing the course size? - the boxmenu is working fine but the content is not (pages), I can see briefly the navigation bar with correct layout, then after a second or so the buttons on the right goes out of the visible area (I have to scroll right to see them), the page has "desktop" layout but should have "mobile".

Worth to mention is that this happens on iPhone 5 that I was able to test on, when I've tried on desktop with firebug/web inspector device simulators course behaved correctly and it was responsive.

The webView.frame.size.width returns 320 the JS call window.innerWidth returns 320, JS call document.getElementById("content-frame").scrollWidth returns 1810.

Edit It works on Android

[brian-learningpool]

Hi @LukaszGrela, there are some serious quirks with the way iOS on iPhone and iPad handles any content inside <iframe> tags. I do not believe this anything in the framework which is changing course size.

[LukaszGrela]

yes, but why then boxmenu page behaves correctly, and even navigation bar is laid down just after opening a page correctly, then after a short delay usually when main content appears it goes out of the viewport.

[davewallace]

@brian-learningpool & @LukaszGrela I can replicate this issue inside an iframe on an iphone 6 currently, the menu is fine, but all subsequent content pages extend well beyond the iframe's intended sizing on the device.

[oliverfoster]

I've got a fix in mind for this https://github.com/oliverfoster/adapt-moodle this is the theory

[oliverfoster]

You need to move all off the #wrapper stuff into a pretend HTML + body div, move the navigation stuff back to the original body, doctor scroll to and apply the -webkit-scrolling attribute to the pretend HTML div. And set the iframe height in px. Complicated but works.

[lc-thomasberger]

see also: #751

[moloko]

this should be resolved with the new _scrollingContainer configuration in Adapt v4