Vertical scrollbar added to my SCORM

Vertical scrollbar added to my SCORM

by Alberto PM -
Number of replies: 8

Hello.


I'm working with Moodle 3.2.1 and Boost theme (I want to use the Essential theme but still not available for this new moodle version).

Also working with Chrome (v.55) and Safari (v.10)

I've added several SCORM packages and I can see a second vertical scrollbar added to the content of the package, as you can see in the image attached.

I suppose that is a CSS issue but I'm not sure about that and I don't know how to fix that issue.

I've tried with overflow but didn't work for me...


Any help will be appreciated.


Thanks in advance

Attachment screenshot-Chrome.png
Attachment Screenshot-Safari.png
Average of ratings: -
In reply to Alberto PM

Re: Vertical scrollbar added to my SCORM

by Mathew Gancarz -
Picture of Core developers

Hi Alberto, a lot of this is done dynamically with YUI when the SCORM package is rendered, but I've had some success in hard-coding minimum heights for the SCORM frame with the following CSS settings:


    #page-mod-scorm-player #scormpage {

        width: 1050px;

        height: 630px;

    }


    #page-mod-scorm-player iframe ,

    #page-mod-scorm-player div {

        max-width: 1050px;

        max-height: 630px;

min-height: 605px;

    }


Keep in mind this will affect ALL scorm packages displayed by Moodle and this will only hard code certain values. It won't scale to the height of the actual module.


If you are using modules that are very tall and involve lots of scrolling, a simpler solution may be just to have them open up in a pop-up, rather than embedding them in the Moodle page.

Average of ratings: -
In reply to Mathew Gancarz

Re: Vertical scrollbar added to my SCORM

by Mathew Gancarz -
Picture of Core developers

Also see this related thread around responsive SCORM in Moodle: https://moodle.org/mod/forum/discuss.php?d=339315

The short answer is there is no good solution right now without requiring the user to click the scorm link and having it open in it's own new window.

Average of ratings: -
In reply to Mathew Gancarz

Re: Vertical scrollbar added to my SCORM

by Alberto PM -

Hi Mathew!


I think your suggest could help me, especially if I can increase the value of height a little bit. My modules aren't very tall but rather more than you tell me.
I'm going to test it and I'll tell you.

Thanks a lot also for the related thread. I think it can help me.


Regards!

Average of ratings: -
In reply to Mathew Gancarz

Re: Vertical scrollbar added to my SCORM

by Alberto PM -

Hi Mathew!


As I mentioned I'm working with Boost theme.
I've tried to add the CSS code in several places: I've tried to add it in 'Appearance -> Advanced Settings' as raw SCSS, I've tried to add it as a SCSS file, even in the config.php file as an external file, but when I access a course all the elements of the theme behave in a strange way since the different elements acquire the height fixed in the height attribute.

Could you help me with this?
What am I doing wrong?


TIA

Average of ratings: -
In reply to Alberto PM

Re: Vertical scrollbar added to my SCORM

by Mathew Gancarz -
Picture of Core developers

Sorry, I'm not familiar with the new Boost theme unfortunately. The CSS changes I recommended are based on Clean theme.

Average of ratings: -
In reply to Mathew Gancarz

Re: Vertical scrollbar added to my SCORM

by Alberto PM -

Hi Mathew!

Yes, I've also tried with the Clean theme, in fact I'm afraid that is the behavior with all themes...

I've copied and pasted your code in 'Appearance -> Themes -> Clean -> Custom CSS' and this is what I get (you can see in image attached).

What am I doing wrong?


Thanks!


P.S.: This is the behavior only with the scorm player (when I'm in the course).

Attachment clean-theme.png
Average of ratings: -
In reply to Alberto PM

Re: Vertical scrollbar added to my SCORM

by Mathew Gancarz -
Picture of Core developers

Hi Alberto, I had a chance to look at the Moodle 3.2 demo site and run some tests, and the CSS code I suggested definitely does not work properly in 3.2. We're on 3.1 right now, sorry, I should have specified the version number when giving the information.

You may be able to make some progress by inspecting the divs and boxes used and playing around with it. In the little time I had, I determined that most of the limitation is from the following tree:


<div id="scormpage">
<div id ="tocbox">
<div id="toctree">
<div class="yui3-g-r" id="scorm_layout" style="height: 680px;">


The scorm_layout height looks to be dynamically set based on the device. For example on a high enough resolution screen (mock iPad Pro using Google Chrome Developer tools) it was set to 1000+ pixels, while on iPad portait size, 768x1024 height, it was set to 750 px.


But hard-coding it in CSS will just enforce one expected screen size and may break other things, so for 3.2 I would not recommend going that route unless you know you are only targeting one device with a screen height of noless than a certain height.


Average of ratings: -
In reply to Mathew Gancarz

Re: Vertical scrollbar added to my SCORM

by Alberto PM -

Hi Mathew!

Thanks for your reply!

I keep in mind what you are telling me and I'm going to have a look.

Maybe your approach could be useful working with medias in the CSS file...


Regards.

Average of ratings: -