SL3 scrolling text includes lots of extra space (IE HTML5)

Hey,

Recently, I had the same problem. I solved it like this:

I changed in main.min.css value:

.slide-object svg {
position: relative;
display: block;
overflow: visible;
pointer-events: none
}

to

.slide-object svg {
position: relative;
display: block;
overflow: scroll;
pointer-events: none
}

And it works

where do you find/edit such code??

"Storyline output"\html5\lib\stylesheets\main.min.css

Thank you, Arkadiusz!  Worked perfectly.

Thanks for the input. Upon implementation and testing, I am discovering that while the CSS change may fix the IE scrolling issue, it is also affecting other elements.

In the image below, you'll notice what is happening.

On left is a sample of the project after I modified the CSS as noted above. You'll see the left and bottom of the shape are affected and the shadow is cut off. 

On the right is how it is supposed to look.

Hopefully Articulate staff can chime in and let us know if a fix is coming for the IE scrolling bug.

Hi Karen,

Internet Explorer and Microsoft Edge have a known issue displaying scrolling panels in HTML5 output. Both browsers often add extra padding to the bottom of scrolling panels so there can be a significant amount of blank space after your content.

Until Microsoft fixes the problem, you can avoid it by viewing the Flash version of your content or switching to another HTML5 browser, such as Google Chrome or Firefox.

Note: You'll also see extra space at the end of scrolling panels in CD-published output since it relies on Internet Explorer.

You're right. I tested and I have a solution.

Do not change .slide-object svg. 

However, you should add:

.scrollarea-area svg {
position: relative;
display: block;
overflow: hidden;
pointer-events: none
}

To refer only to scrollbar

Hi there. I tried your solution and I can't seem to get it to work in my SL3 course. Could you please let me know if I should be adding it to a specific place in the main.min.css file? I'd appreciate your help. Thanks.

Hello. I thought I'd mention this in case someone encounters the same thing.  I figured out the problem -- the scrolling panel I was trying to fix was part of an Engage interaction. If the scrolling panel was on a SL3 slide, the solution above worked.

Ah, that'll do it, Lea! Thanks for that update, and I'm glad you were able to figure it out. If you're ever stuck again it's always helpful to share a copy of your .story file as well for folks to take a look at. 

How about SL 360? My client is asking about the large scroll area, too. I am reluctant to mess with coding by others in my company can, if that would resolve the issue.

Hey Rick,

Is your client using Internet Explorer or Edge? If so, you'll likely see extra space at the bottom of scrolling panels, and this will happen with Storyline 3 and Storyline 360. 

Hopefully Arkadiusz can chime in and help you implement his workaround!

Arkadiusz’s code works great, but I prefer not modifying files after publishing. I found that by using jQuery I can implement the fix on the page with the scrolling panel. I put the following code in a JavaScript trigger that executes when the page or layer containing the scrolling panel starts.

//jQuery/css so Scrolling Panel displays correctly in IE and Edge

$(".scrollarea-area svg").css({"position": "relative", "display": "block", "overflow": "hidden", "pointer-events": "none"});

The only down side to using JavaScript is that it doesn’t work in preview mode. Thanks to Arkadiusz for sharing his code!

Thanks Steven Walsh. That works perfectly in our project.

Thanks Arkadiusz!

This worked for me.

Thank you! This fixed our problem.

However my course was in the Classic player so I didn't have a main.min.css - I added it to: \html5\lib\stylesheets\desktop.min.css

Super helpful! thx.

Ugh. I used to use this but it stopped working:

$(".scrollarea-area div").css("overflow", "hidden");
$(".base-layer div").css("overflow", "visible");

I also tried this with no effect:

$(".scrollarea-area svg").css({"position": "relative", "display": "block", "overflow": "hidden", "pointer-events": "none"});

A couple things.  SL 360 as of 2020 does not include jQuery, so if you want to use that functionality, you have to load it yourself.  Also, this appears to only be an issue with IE, Chrome & the new Edge do not have this problem.

In this instance, I would avoid jQuery and use the following code if you only have one scroll box on the page.

// works for one
document.querySelector(".scrollarea-area svg").style.overflow = "hidden";

If you have more than one scroll box, you will need to do something like this.

// works for two
document.querySelectorAll(".scrollarea-area svg")[0].style.overflow = "hidden";
document.querySelectorAll(".scrollarea-area svg")[1].style.overflow = "hidden";

Hope this helps,
Steve

Thanks Steve. I did end up using Arkadiusz's script in the css:

.scrollarea-area svg {
position: relative;
display: block;
overflow: hidden;
pointer-events: none
}

I am curious - if the fix is that simple, why doesn't Articulate add that code to the generated css on publish?