Webobject has scroll bar - too large

Jan 21, 2020

Marlene Koch
By Marlene Koch

Hi all,

I want to include a webobject, an animated graphic, into my SL module. When I publish it, I have to use the scroll bar to see the whole graphic. Is there a way to scale the webobject?

- I already tried: resizing the gray shape which appears on the slide once a webobjec tin inserted

- I tried to insert it as a video with an embed iframe code. That worked on a full screen (desktop)but it doesn`t display the entire graphic when I scale down my browser window or when I view on smaller devices

- I found another thread which basically explained that if the object you want to insert is larger than your webobject you have to use a (in the thread provided) html code to get rid of scroll bar and margins - but that code was only for older SL versions, not for SL 360. The question how to insert the html ocde in SL 360 was not ansered.

Does anyone have an idea how I can insert my website with the interactive graphic so it is displayed as a whole?

Here is the currect preview in SL 360 when included as a webobject (full screen): https://360.articulate.com/review/content/d07030c8-0280-45de-89d8-597c3aac5176/review

Here is the iframe code the website provides: <iframe width="515px" height="860px" src="https://service.destatis.de/bevoelkerungspyramide#&s=m" scrolling="no" frameborder="0"></iframe>

btw: In Rise it works without problems.

Thanks for your help!

Marlene

 

3 Replies
Katie Riggio
over 4 years ago01/24/20 at 5:11 pm (UTC)

Greetings, Marlene!

Thank you for reaching out and for sharing those links so we can have a thorough look! 

When the html content in a web object is larger than the web object itself, the published content will have scroll bars and unnecessary margins. A few approaches from here:

  1. We recommend keeping the html content from being larger than the space you've allotted for the web object in Storyline.
  2. As you shared, there may be a way to suppress those scrollbars and unwanted margins in local web objects using code. In this article, you'll find the necessary CSS to add to the index.html file of the website you're embedding in the web object. If this is your website: The index.html file lives in the root directory for your website when going to the webserver.
    • ..and full disclosure: I also thought it was Storyline's story.html/index.html at first! 😅

I hope this helps clear up any confusion, and let me know if applying that change to your website's index.html file helps!

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