Presentation size on iPad and iPhone

I've been playing around a bit with Storyline, and it's going quite well! My only issue (for now) is that the size of my presentations gets screwed up on iPad and iPhone.

I'm setting up my courses as small activities on larger pages, so I'd like to have them contained within iframes. I set my story size to fit within the iframe, and on a desktop it works great. However, when I look at iPad/iPhone, the presentation displays larger than my iframe so that it becomes cut off and impossible to navigate. It looks like my presentations are getting resized to the maximum possible for the devices. How can I set a defined width/height that mobile viewing respects?

48 Replies
Ren J

The iframe can't scale, I want it there at a certain size so that I may have my presentation on the same page with other information. I tried out setting the storyline file to scale to fill the browser size, it worked as intended on desktop but again on iDevices it's sized wrong.

Specifically, my frame is about 650px wide. On iPad, if I load the page in portrait mode, when viewed portrait-style, the presentation appears at 768px wide (max iPad width) and also about 100px or so down from the top of the frame. So, I only see the top left corner. When viewed landscape-style, the presentation appears at 1024px wide (max width again) and also about 50px from the left, so once again I only get the top left corner.

If I load the page landscape-style, then the presentation is the correct size, but because it's offset I still can't access any of the controls.

Does this make any sense?

Ren J

Thanks, that does help! It's not really the answer I would have liked, but at least it explains a bit.

Is there a way to have a "launch" (new window) served only to html5? So flash-enabled browsers/devices can have the fully functional presentation inline, and html5-only devices can still get served a properly-sized presentation? That would solve it, I think.

Astrid Davine

I have a similar problem.  On the iPad, I am launching a Storyline SCORM package (SCORM1.2 because I need tracking, with HTML5 output) from our custom Moodle (v2.2).  All seems to be launching and tracking correctly.  Unfortunately, though, most of the navigation buttons are getting cut off because the presentation size is larger than the frame that Moodle uses for the SCORM.

It doesn't seem to matter if I choose 'Current window' or 'New window' in the Moodle SCORM settings.  I've just started playing around with the 'Browser size' options in Storyline, but after viewing the above response, can see this isn't really going to help.

Does anyone have some solutions?

Will I need (somehow) to completely resize my storyline project, including possibly, putting the navigation buttons at the top? (I'm able to see most of the central area of the presentation, but losing the 'player' around the outside.)

Thanks,

Astrid

P.S. I am having a similar issue of navigation buttons being cut off when viewing Articulate Presenter content via the 'Puffin Web Browser Free' or 'Rover' apps on the iPad.

Ole Djurhuus

#Astrid

I dont know what your story size is, but I managed to solve our Moodle issue for Ipad by styling the scorm page in Moodle through css, trying to get rid off as much "empty" space as possible. We use "New Window" and our story size is 995 x 560 .

In my Moodle theme --> style --> theme.css I added these extra style:

#page-mod-scorm-player #footer{display:none}
#page-mod-scorm-player #scormtop {display:none}
#page-mod-scorm-player #region-main, #shadow-right, #scormpage, #tocbox, #toctree, #scorm_layout, #scorm_content{padding:0px;margin:0px;width:100%}
#page-mod-scorm-player #region-main .region-content {background:none;padding:0px !important;margin:0px;width:100%}
#page-mod-scorm-player #page-content #region-post-box {padding-top:0px}
#page-mod-scorm-player body { min-width: 980px }

I spend a lot of time playing around with the css. Chrome is a great browser to investigate css with (right click and choose show details about element, and then play with the css).

Best regards

Ole

Astrid Davine

Thanks so much for all your suggestions, Ole. 

Unfortunately, my large organisation has a hosted version of Moodle, so as I understand it, I can't play around with the code (any suggested changes go through approval committees first, as what suits me may not suit the rest of the organisation).

I'll keep trying with adjusting the settings and story size...?

Doug Thom

HI Astrid,

Have you found a solution to your problem which also seems to be my problem.  I have worked on this for days now and can't get just the right size to fit in the frame without cutting off the bottom and right side with too much empty space on the left. I may have to look at Ole's css solution but I was wondering if you solved your problem without css? Thanks, Doug

David Lindenberg

Hi Ole,

With regard to your CSS work-around for the iPad, I noticed you said, we use 'New Window' in your comments.  So, it would have to launch new browser window?  No way to use Current window?

I'm running into the same problem.  My module pushed over to the right and down in Moodle so that I can't get to any navigation buttons.

Thanks,

David

Sarah humby

Has anyone found an answer to this one yet?

I've been banging my head against this one for a week now. I really can't see how LMS hosted HTML5 output can ever work practically on an iPad using Storyline without launching in a new window

Yet launching in a new window brings problems with pop-up blocking

I'm new to iPads but could anyone tell me why some websites, viewed on an iPad, allow pinch zooming, and others don't?

regards

Simo

Darren Besanko

I think I am having similar issues on iPad. On the desktop all seems to be working.

In Storyline I have selected: 'display at users current browser size' and 'scale to fill browser window', and also I have published including html5 and ticked when publishing 'use Articulate Mobile player on iPad'.

- When I load the scorm activity as 'open in new window', nothing happens on the iPad when clicking on the activity

- When I load as 'open within the window' it opens on iPad, but I cant see the whole presentation. There is too much cut off to navigate.

Any further ideas?

Christine Hendrickson

Hi Darren, 

Just to confirm, when you use the "open within the window" option for the SCORM project, it's launching in the Articulate Mobile Player, correct? Is the base of the player cut off, or are the sides cut off?

Any chance you can share a link to the project, so I can take a look on my iPad, or can you share the .STORY file here?

Thanks!

Darren Besanko

Christine, thanks for responding.

I have had limited progress:

- Allowing popups for Safari on the iPad allows the new tab to open

Option 1  As described, when published content includes html5, then this option correctly starts to operate a new tab on the iPad. The content that is cut off is to the right and the bottom. It seems to work worse than yesterday now because the sounds isnt there.

Option 2: If html 5 is not selected (and articulate mobile player is selected), then it correctly diverts to try and open the app, but then access to content is denied. I believe this is something to do with the LMS (Moodle).

The .story file is 60MB... I could send it to you as a large file transfer using emai if that suits.

Many thanks,

Darren

Christine Hendrickson

Hi Darren,

Thanks very much for the information.

This sounds like something we'd definitely want to check out. I don't believe a file that size will upload to the forums, so it may be best to send it over through our support system. 

You'll be able to attach the .STORY file on the second page of the following form:

Articulate Support - Submit a Support Case

Please be sure to include a description of your issue. Please also include the URL for this thread in the form. Also, please share the case number with me. You're welcome to do so here, or in a private message. This way I can follow the progress of the case and update this thread.

Thanks very much Darren!

Tom Kosicki

Hello everyone,

I have the same problem - on iPad bottom part of the training is cut off and I can't see the navigation buttons.

I put the training into Moodle (published for SCORM 1.2)

I've heard that if publish a package to the Tin Can API - I can play training in Articulate Mobile Player, but if there are any plugins Tin Can API for Moodle? Does this make any sense?

Any further ideas?

Dan Marsden

Moodle doesn't currently provide support for Tin Can - there is some work going on at the moment to add this functionality but it hasn't landed in core yet.

Moodle is also known to have issues displaying SCORM content on Mobile devices - I have a GSOC student working on this at the moment and hopefully it will be a lot better in Moodle 2.6 (release Nov 2013)

Tom Kosicki

Hi Dan and Ashley,

Thanks for your response.

So I understand that the problem with the display projects on iPad and cutting off bottom parts, is no solution?

I noticed that if I move the iPad in various directions (for example, if I turn it horizontally) project window adjusts to the size of the screen.

But my client wants to have the correct size window immediately after you turn project on the iPad...

Ashley Terwilliger

Hi Tom,

Have you seen the information here about how Storyline's published output works in HTML5, Flash, and Articulate Mobile player? As mentioned in this thread, look specifically at the Player: Output set up for the Browser size. 

Hope that helps clarify a bit more - the community may have some other suggestions/work arounds.

ian freeman

Problem: I cannot zoom out to view the entire webpage.

This issue only occurs on pages that have the Storyline player.

Display works properly on desktop but not on mobile 

  • OS: Android (4.3)
  • HTML5 Output.
  • IFramed on webpage.
  • Issue occurs on both Chrome and Dolphin browser

Note, I just had a thought. Do you think the option "Adjust Player to Auto fill Browser" is the direct culprit to mine and others in this thread?