How to fit content in mobile with address bar (URL)

Hi,
I have made a module in 16:9 ratio, when I click back button on mobile, the address bar get restored and content shrinks and there is blank space on the left and right side, please see the 003.jpg for your reference.

Is there any way to fill the width. 

Attached screenshots for your reference.

Thanks in advance.
Jaipal

 

35 Replies
Crystal Horn

Hello, Jaipal.  For some reason, your attachment didn't come through.  But I think I understand what you mean.  In HTML5 output for Storyline 1 and Storyline 2 courses, the browser and OS have more control over how your course behaves.  For example, on my iPhone, if I orient my phone to be in landscape mode, the course fills the screen.  As soon as I touch the screen, however, the browser controls reappear, and the slide shifts to a smaller size.

In the HTML5 output of Storyline 360, we've rebuilt the player so that you'll be able to eliminate the browser controls from the screen.  Here's some information about the new responsive player in Articulate 360 products.

We've got some guidelines for optimal slide sizes for different screens for your Storyline 2 courses.

Let me know if that's helpful, or if I've missed the mark!  You can share you project here, if you'd like, and we can do some testing.  Let us know the version of Storyline you used to create it.

Thanks!

Crystal Horn

Hi Jaipal-- thanks for the file for testing.  I see you're working with 360, so I have a better idea of what's going on.  I tested your file and one of my own and found the following to be true:

Mobile iOS

  • Mobile Safari will have browser chrome in portrait mode
  • Mobile Google Chrome will have browser chrome in both portrait and landscape modes

Android Devices

  • Mobile Google Chrome does not show browser chrome
  • When clicking the Android "back" button on the phone, the course comes out of "full screen" mode and the browser chrome appears

I'm working with our developers to understand if we have any control over that "full screen" behavior on the iOS devices, so I'll be sure to update this discussion with new information I can share.

For now, it will be expected on Safari in portrait mode and with Google Chrome in iOS devices that you'll see the browser URL and controls.

Jacob Villum

Hi Crystal. When will you have fixed this issue? I have a client, that is very dissatified with the solution and I have tried everything. Even with the launch mode, were you can disable browser controls. The browser controls will still appear on my Iphone 5S, and it happens with Safari as well as Chrome.

What to do?

Br

Jacob

Ashley Terwilliger

Hi Jacob,

Thanks for checking in. I don't have a timeframe to offer in regards to when we'll identify and implement a fix, but it is still an open issue with our team to investigate. This discussion is tagged for an update once we have any additional info to share. As long as you're subscribed you'll receive a notification from the ELH community. 

Ashley Terwilliger

Hi all, 

Great news!  We just released another update for Articulate 360, and included a few important fixes and new features that you'll see in the release notes here.  

The item you'll be interested in is how we fixed an issue for when browser chrome wouldn't disappear as expected when viewing courses on an iPhone.

Just launch the Articulate 360 desktop app on your computer and click the Update button for each application. Details here.

Please let us know if you have any questions, either here or by reaching out to our Support Engineers directly. 

Lizzie Angell

Hey so I am making a course that is to be only on mobile phones, on the most part the fixes look good and I have it functioning well on Android (yet to test IOS) but I have a slight problem - if my phone goes into sleep mode - when I restart it the browser bars re-appear, and the course is too small to really be functional.

 

Alyssa Gomez

Thanks for reaching out to us about this, Lizzie! I'm happy to help, but first I want to get a little more information from you about your file.

  • Are you using Storyline 360? 
  • Are you testing the content on a web server or a LMS?
  • What version of Android are you using?
  • What mobile browser are you using?
Ashley Terwilliger

Hi Lizzie,

Do you know what update of Storyline 360 you're using? We're on update 13, but the issue initially discussed here for iOS was fixed in Update 11. 

Also, can you let me know if you're seeing this in portrait or landscape mode? You mentioned Android version 6.0.1 - is that your mobile device or tablet? 

Alyssa Gomez

Thanks, Lizzie!

When you test this link on your Android 6 device, do you see the same problem? If so, can you share a screenshot taken from that device?

Are you finding that the browser chrome (URL address bar) was hidden when you first viewed the course, then it reappeared after restarting the course?

Lizzie Angell

Hey so I tested the link you sent.

The course seemed to stop the phone going into sleep mode - how is this achieved?

If I turn the phone to sleep mode, or leave web browser - say to answer the phone or check an email, the address bars appear.

I have attached screen shot for you - this is the same in portrait and landscape.

Alyssa Gomez

Thanks so much for that screenshot, Lizzie.

There's nothing special about the link I sent--your device will go into "sleep mode" if you haven't touched the screen in a given amount of time. It could be that your course has a slide with a longer timeline or a video. Touching the screen periodically on those slides will prevent the device from going to sleep.

I've done some digging, and we do have a documented issue where a course will display smaller and show the browser URL address bar on revisit in Chrome on Android phones. 

We'll be sure to let you know as soon as this is fixed. You're in the right place to stay up to date on this bug's progress!

Lizzie Angell

Hello again,

I now have some people who have tested the mobile course on IOS - they are using: 

iPhone 7 iOS 11.3 - safari

- the Storyline wrapper come with an instruction you to swipe up for fullscreen view, if you don't then the bottom of the game is off the bottom of the screen. If you do swipe up, it is fine except for the buttons along the top of the game - when you try to select them, the top of the iPhone browser moves back down again - you have to come back out of fullscreen mode before you can select those buttons. 

iPhone 5 iOS 11.3 - safari

- When clicking certain areas of the screen, the browser crops up and prevents users from clicking buttons at the top and bottom of the screen.

- The hand that appears with an instruction to swipe up for fullscreen view prevents me from using the left hand (previous) button.

Basically any buttons round the outside are difficult to use on iPhone.

 

Lizzie Angell

This course is for a client and I am unable to send it. But any thing with buttons in the top or bottom 60px of a course are unusable - I have a menu button top right, and buttons on the bottom. 

Also my previous/next buttons are mid way up the screen and the left one is covered by the browser window button telling you to swipe up to go full screen (this remains on screen even when full screen)

Rebecca Evens

Hi Ashley was there any update on this issue? I have a Storyline 360 course launching through an LMS on an iPhone 8 plus, and I cannot make the address bar and tabs go away, so part of the course (which includes the navigation buttons) is off the bottom of the screen and cannot be accessed. There's no scroll bars, so I can't even scroll down to the buttons, making the course un-navigable.

Rebecca Evens

Hi - just for a bit more detail, the course was published with the 'modern' style. I've republished in 'classic', and now I get a button saying 'swipe up for full screen', which works really well. However, the button is obscuring parts of the course,  including a link which has to be clicked for it to mark complete. Is there any way to move the 'swipe up for full screen' button?

Alyssa Gomez

Hi Rebecca!

Thanks for reaching out and letting us know what you've tried so far. Can you help me with a few more details?

  • What update of Storyline 360 did you use to publish the course? The latest is Update 21
  • Are you seeing the address bar in mobile Safari or Chrome?
  • Do you see the address bar in Portrait mode and in Landscape mode?

Now, let's talk about the 'swipe up for fullscreen' icon you're seeing with the Classic Player. We've seen this issue occur when all the player features have been disabled. Could you try enabling at least one of the player features, even the previous/next buttons? That should make the swipe icon disappear. Let me know if that works!

Rebecca Evens

Hi Alyssa! Thanks for getting back to me. This is the versionof Storyline we are using:
[cid:image001.png@01D4863A.8F75BC70]
We don't have admin rights to our computers so it's not possible to get every update straight away...
We are seeing the address bar in Safari, and we haven't tested it in Chrome.
All the controls are disabled - the swipe up button disappears after swiping if I switch the buttons on, but I didn't want them to appear, and if I only set them on a single page, the shape of the player window changes throughout the course. Is there any way to trigger the correct version of the swipe up button without this happening?

C2 General

Ashley Terwilliger

Hi Rebecca,

It looks like you intended to share an image here with your Storyline version, but perhaps responded via email? If so, those attachments and images won't be posted here to the E-Learning community. Can you let us know the number you're seeing, you can see the full list here with Storyline 360, build 3.21.17083.0 being the latest. 

When you set the buttons on a single slide, is that slide one your learners navigate too or one that they'd never see? Are you seeing the player window change from slide to slide? It may help if we're able to take a look at your .story file. You can share it by uploading here in the public forum or sending it along by uploading it to me here.

Let me know and well keep troubleshooting from there! 

Leslie McKerchie

Hi Rebecca!

I have some good news for one issue you've shared here:

Fixed: The "drag up for fullscreen" hint wouldn't disappear on iPhones when all the player features were turned off in Storyline.

You can check out all the details on the latest release right here.

If you need instructions on updating, click here.

Rebecca Evens

Ah, sorry Ashley! It is v3.20.16814.0
Will getting it updated fix the issue?
I haven't done much experimenting with putting the buttons in different places- I just set the buttons on the first page. I know in previous versions of Storyline, that would change the Classic player window on each page - is it different for this version?
Many thanks for your help!
Becky

C2 General