Storyline player pushing off the bottom of the browser in and iframe with HTML5 on iPad
Sep 09, 2016
Hi,
We are having an issue with Storyline player. We are publishing our content for an LMS and the player buttons are not showing at the bottom of the screen. Looking at Storyline's JavaScript, this is being caused by it checking the height of the browser window and adjusting the content to this size. Now our content is within an iframe but the iframe has a navigation bar above it. So the content is figuring out the height including our navigation bar and then making the content too high and therefore pushing the player buttons off the screen. This only occurs in the HTML5 content on the iPad.
We had this same issue a few versions back but an update to Storyline seemed to fix it but this seems to have been re-introduced in the latest version.
Has anyone experienced a similar issue or have any advice. This is extremely urgent as we have customers complaining about the problem. Removing the navigation is not an option. We do have a JavaScript hack we could implement to fix the issue but this will mean applying this hack to every module and every time we republish, which is not ideal.
Thanks,
Darren
5 Replies
Hi Darren!
Is this something that you are able to replicate if you publish the content to SCORM Cloud or is this limited to your LMS?
When you embed a published course in an iFrame, the iFrame takes control of the content's placement. Depending on how the iFrame behaves, content might appear to be misaligned, cut off, or even have scroll bars. If you experience these symptoms, please contact your server administrator for assistance.
Some learning management systems (LMSs) display content in an iFrame by default. If your content is misaligned or truncated in the LMS iFrame, please contact your LMS provider for support.
Thanks for the reply. We are the developers of this LMS. It is not an iFrame issue rather a sizing issue caused by Storyline itself. We can get it to work by applying a hack to story line to stop it adjusting to the size of the window to the browser size but this is not optimal. The problem, as stated before is due to the Storyline content resizing to the size of the browser window rather than the size of the iframe. On mobile devices (tested on Android and iOS) this pushes the content off screen due to the iframe behaving differently on these devices. We have tried multiple iterations whilst adjusting the iframe but this does not fix the issue. The issue seems to be that storyline is assuming that the content will be shown in a full width and height iframe rather than there being anything else on the page. It should check the size of the parent container it is in, in this case the iframe, and adjust to the dimensions of the iframe, not the window. Surprised no one else is having this issue.
We are investigating issues with iOS as well as I know there are issues with iFrame height and iOS but the tests so far and hack seem to suggest it is Storyline causing the issue.
Thanks,
Darren
Thanks Darren!
You didn't mention if this happening in SCORM Cloud and sounds like you are still doing a bit of testing.
I am sharing this thread with some of my colleagues and perhaps they can weigh in a bit better or even assist me in bridging the gap here :)
Thanks for your patience and certainly let us know what else you find in your testing if you need assistance from us.
Thanks for the reply,
This doesn't occur with SCORM cloud as that opens in a full width and height iFrame so the sizing works. It is only an issue if the iFrame is not full height and there are other elements in the DOM of the page, like in our case a navigation system at the top to leave the module or navigate to other elements like LMS notes.
Thanks,
Darren
Sent from my iPhone
Thanks for that information Darren. You are welcome to reach out to our support engineers here if you'd like to go over the technical details as well.
This discussion is closed. You can start a new discussion or contact Articulate Support.