Lightbox Offset in Internet Explorer
Aug 17, 2018
I've run across an issue where a lightbox is offset to the upper left corner of the screen (see image).
This occurs when published with Storyline 360 v.3.18.16449.0 and I've encountered the problem on Articulate Review and SCORM Cloud.
The good news is I fixed the issue by updating the main.min.css file in the published output. You can do the same by opening the folder directory that is created when you publish a project and following this path: html5/lib/stylesheets. There you'll find the CSS file in question. Open it and add the following to it (I put it at the end). Be sure to zip the output or copy the CSS file to the zipped folder directory before you upload it to an LMS.
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {.lightbox .slide-container{position:relative;top:50% !important;right:initial;bottom:initial;left:50% !important}}
This will target IE 10 and 11 and it'll fix the offsetting.
8 Replies
Hi there Jamie,
So sorry for the trouble. We're seeing the same problem when using the Modern player. Fortunately this doesn't happen with the Classic player, so that could be an alternative if using Internet Explorer is essential.
Thanks for sharing how you got around it! We'll let you know as soon as we get this sorted out. 😁
Any further update regarding a fix for the above issue?
Hi Dearne,
Thanks for checking in on this, but I don't have an update to share yet. I'll keep you posted here with any additional information.
Hi, I have the same problem and I am not a friend with CSS, so i hope in some fix....
Hello Ondřej and welcome to E-Learning Heroes :)
You are certainly in the right place to be notified of any updates on this issue.
In the meantime, using a browser other than IE is recommended or simply use the Classic Player.
Good news, folks! We fixed the issue you reported where lightboxes were offset in Internet Explorer.
Install the latest Storyline 360 update to take advantage of all the recent features and fixes.
If the problem happens again, please record a Peek 360 screencast for me, and I’ll be happy to help!
This issue is occurring in Storyline 3. The CSS fix suggested above does not solve this issue. Please send an ETA on the next update.
Hi Taylor,
We don't have a release date set for Storyline 3's next update, but as soon as we know more we'll post here.
This discussion is closed. You can start a new discussion or contact Articulate Support.