Modern Player iPad layout

Jul 23, 2018

Sam Carter
By Sam Carter

We are getting a large left margin that cuts off the right part of the content.

Has anyone else had this issue?

23 Replies
Shane Leonard
over 5 years ago08/28/18 at 2:03 am (UTC)

Hi Sam.

Hi Articulate staffers.

Any solution? We've got the same issue.

Our project uses modern player and a generously sized story design to allow for responsive scaling to large screens without a reduction in image quality.

But on iPad everything is pushed off to the right as per your original post.

Where did you land on this?

Shane.

Jana Godwin
over 5 years ago08/28/18 at 6:29 pm (UTC)

We are having the same problem here, After having shown the benefits of the Modern player to 6 other developers in different departments, I now wish I had tested it first!  I'm trying some different settings to see if it fixes the issue. We are using Cornerstone as our LMS, and it looks fine in everything except the iPad (which is kind of the whole point of using the Modern player).

Hope Articulate comes up with a fix soon!

Shane Leonard
over 5 years ago08/28/18 at 10:14 pm (UTC)

Thanks Sam and Jana.

To me, the whole point of switching to Modern Player is to break out of the typically small elearning stage and deliver a generous, responsive, full-screen experience.

We have designed at 1408 x 880px which is a 16:10 aspect ratio. We've chosen this size so the content doesn't have to up-scale much on a 1920 x 1080px screen. Keeping images nice and sharp.

And it works and looks great... EXCEPT on iPad. >:(

iPad users are a large chunk of the audience. Surely this is just a small change to some device specific CSS. Perhaps adjusting the margin-left on iPad or checking whether iPads are calculating the device-width correctly.

Hoping Articulate developers look at this soon - it's not a critical bug but it's the one thing that's really messing up an otherwise pretty ideal user experience.

Shane Leonard
over 5 years ago08/29/18 at 1:00 am (UTC)

Note - from further testing this bug occurs in both Google Chrome and Safari on iPad.

Using developer tools and tweaking some css properties, you can simulate a fix by setting a more appropriate max-width value to either the body tag or the .area-primary class.

But ideally this value would come more accurately from the device dynamically, and the fix from Storyline rather than using some bolt-on hack after publishing.

Ashley Terwilliger-Pollard
over 5 years ago08/29/18 at 12:04 pm (UTC)

Hi all,

I'm truly sorry for the delay in responding here, but I did want to confirm our team is hard at work on a fix.

Also, I wanted to link to this article, where you'll see the issue confirmed and we're investigating the issue and possible solutions. Once we do have a fix in place, we'll update the E-Learning Heroes community and that article.

You'll also see one other workaround noted at the bottom:

In the meantime, you can avoid the issue by launching your course in a new window. You can do this in your LMS or in Storyline. Check with your LMS administrator for instructions. Or, open your player properties in Storyline, go to the Other tab on the ribbon, mark the box to Launch player in a new window, and click OK.

If you have any other questions I can answer, please let me know. 

Sam Carter
over 5 years ago08/29/18 at 1:58 pm (UTC)
Ashley Terwilliger 
In the meantime, you can avoid the issue by launching your course in a new window. 

Launching in a new window could/maybe an option for a few, it isn't an option for many. The suggestion that there is a workaround seems to diminish the urgency of releasing a fix.

A few reasons why this isn't a workaround:

  1. Some LMS always open a new course window but the new window wraps the course in a frameset. If SL were configured to open a new window, there would be 3 windows: (LMS, new frameset window, then SL window) to view a course. It is doubtful this would play and track correctly, if it did it would cause usability issues for some/many learners.
  2. Major accounts don't welcome vendors telling their LMS Admins anything at all, much less how to present the course. There are several reasons why.
  3. Major accounts have course presentation standards. Delivering an exception so one course behaves differently that all the others isn't welcome.
Shane Leonard
over 5 years ago09/03/18 at 4:32 am (UTC)

Here's the best hack I can come up with. Add a trigger to the first slide to Execute Javascript when the Timeline Starts and add the below code.
Note: This works great except if the user leaves the course, returns and chooses to resume from where they left off. In that case, that trigger won't be run. Perhaps someone could improve this for me? (Looking at you Articulate development team.)

Here's the code to add to your JS Trigger:

if(navigator.userAgent.indexOf('iPad') != -1){
   if (window.orientation == 90 || window.orientation == -90) {
      document.body.style.width = (screen.height + 'px');
   }
   else{
      document.body.style.width = (screen.width + 'px');
   }
   window.addEventListener("orientationchange", function() {
      if (window.orientation == 90 || window.orientation == -90) {
         document.body.style.width = (screen.height + 'px');
      } else {
         document.body.style.width = (screen.width + 'px');
      }
   });
}
Sam Carter
over 5 years ago09/05/18 at 3:35 pm (UTC)
Shane Leonard 

if (navigator.userAgent.indexOf('iPad') != -1) {
 if (window.orientation == 90 || window.orientation == -90) {
 document.body.style.width = (screen.height + 'px');
 } else {
 document.body.style.width = (screen.width + 'px');
 }
 if (!doneItAlready) {
 donItAlready = true;
 window.addEventListener("orientationchange", function() {
 if (window.orientation == 90 || window.orientation == -90) {
 document.body.style.width = (screen.height + 'px');
 } else {
 document.body.style.width = (screen.width + 'px');
 }
 })
 };
}

SL doesn't restore JavaScript variables on resume, so here's one possibility.  A global variable like dontItAlready.  If undefined or false, add the event listener then set the global variable true.

Leslie McKerchie
over 5 years ago09/18/18 at 5:14 pm (UTC)

Hello everyone!

I wanted to pop in to let you know that we just released update 20 for Storyline 360! It includes lots of improvements, and you can check them all out here.

One of the fixes addresses an issue where in some LMSs, courses using the modern player could get cut off or pushed off the right edge of iPads.

Here’s how you can update Storyline 360 to take advantage of everything the latest release has to offer. Let me know how you make out!

This discussion is closed. You can start a new discussion or contact Articulate Support.