H5P Hub doesn't display correctly (moodle)

Submitted by arherstal on Tue, 03/24/2020 - 19:10
Forums: 
Bugs in content types

Since the last update of my moodle (3.8.1 to 3.8.2), the h5p hub doesn't display correctly when adding "new activities", the width of the h5p hub iframe is stucked at 300px.
I'm using default template on moodle.

Tested on firefox & chrome.

What am i missing ?

H5P version 1.20.2
Moodle version 3.8.2+

Screenshot in attachement.

Attachments: 
Image icon moodle-h5p-01.png
Image icon moodle-h5p-02.png
Content types: 
Moodle
otacke's picture

otacke

Wed, 03/25/2020 - 02:05

Hi arherstal!

The screenshot that you attached us showing a width of 100% for the iframe, so the 300px limit seems to result from some class higher up in the DOM tree. Have you already traversed the items upwards/checked the property inheritance?

Best,

Oliver 

arherstal

Wed, 03/25/2020 - 13:08

After playing a bit with the debugger of my browser. I figure it out The H5P iFrame was cointained in a fieldset and that fieldset seems to be the element responsible of the stucked width.
If i apply on that element the style width: 100%, The H5P Hub displays correctly.

So i have modified the forms.scss in that directory. (theme\boost\scss\moodle).

.mform fieldset {
    margin-bottom: $spacer / 2;
    border-bottom: $border-width solid $table-border-color;
    width : 100%;
}

At first look, It seems to work without messing up other elements of the website.

Thx for help