Embed - Course presentation - Bottom slide indented Left to right
Moodle Version 3.3
H5P V 1.7
Adaptable version 1.6.1
Seems I have got a strange one going on.
Using Course presentation - created and set to "used but hidden within the course."
If the activity is used directly no problem.
If embed, seems to develop a shift to the right on the bottom bar. Refer to attachments.
I have re-created a few of the activities to see if there is a corrupt module but it seems to be across the board and site-wide only on this activity type.
But..
Tested Course Presentation "Berries" from the H5P site embed and its fine.
Tested in to lesson and a page to see if there was something going on there, but the same look is happening.
Used Chrome to debug but I can't see anything amiss.
Going to be actually heading to Sydney to do a presentation to new trainers on using the site for the next 3 days so won't be able to do too much on it.
Only thing I can think off is I have updated the plugins and Theme over last few days. Not sure if something has been introduced since then.
icc
Wed, 02/28/2018 - 13:06
Permalink
It looks to me like there is
It looks to me like there is an extra CSS rule hitting one of the elements inside the presentation, giving it some extra margin to the left.
You must use the right-click and Inspect Element to figure out what is going on. The element you want should look like this:
Try to compare it with the same element of the H5P.org presentation that is working.
You can see the style rules that are hitting in the pane to the right of the elements.
danjeffries
Wed, 02/28/2018 - 18:15
Permalink
I was coming on here to post
I was coming on here to post the EXACT same thing (I think I've even posted about it before).
It's really frustrating because users can't see their summary slide (see attached).
I've inspected the element. Des this help?
<nav class="h5p-cp-navigation" id="yui_3_17_2_1_1519837587662_509"> <ol class="h5p-progressbar list-unstyled" id="yui_3_17_2_1_1519837587662_508"><li class="h5p-progressbar-part h5p-progressbar-part-show h5p-progressbar-part-selected" id="yui_3_17_2_1_1519837587662_544"><a href="#" tabindex="0" id="yui_3_17_2_1_1519837587662_543"><span class="h5p-progressbar-part-title hidden-but-read">Slide 1 of 6: Slide 1 contains not completed interaction. Current slide</span><div class="h5p-progressbar-part-has-task"></div></a><div class="h5p-progressbar-popup" aria-hidden="true">Slide 1</div></li><li class="h5p-progressbar-part" id="yui_3_17_2_1_1519837587662_523"><a href="#" tabindex="-1" id="yui_3_17_2_1_1519837587662_522"><span class="h5p-progressbar-part-title hidden-but-read">Slide 2 of 6: Slide 2 contains not completed interaction. </span><div class="h5p-progressbar-part-has-task"></div></a><div class="h5p-progressbar-popup" aria-hidden="true">Slide 2</div></li><li class="h5p-progressbar-part" id="yui_3_17_2_1_1519837587662_527"><a href="#" tabindex="-1" id="yui_3_17_2_1_1519837587662_526"><span class="h5p-progressbar-part-title hidden-but-read">Slide 3 of 6: Slide 3 contains not completed interaction. </span><div class="h5p-progressbar-part-has-task"></div></a><div class="h5p-progressbar-popup" aria-hidden="true">Slide 3</div></li><li class="h5p-progressbar-part" id="yui_3_17_2_1_1519837587662_512"><a href="#" tabindex="-1" id="yui_3_17_2_1_1519837587662_511"><span class="h5p-progressbar-part-title hidden-but-read">Slide 4 of 6: Slide 4 contains not completed interaction. </span><div class="h5p-progressbar-part-has-task"></div></a><div class="h5p-progressbar-popup" aria-hidden="true">Slide 4</div></li><li class="h5p-progressbar-part" id="yui_3_17_2_1_1519837587662_507"><a href="#" tabindex="-1" id="yui_3_17_2_1_1519837587662_506"><span class="h5p-progressbar-part-title hidden-but-read">Slide 5 of 6: Slide 5 contains not completed interaction. </span><div class="h5p-progressbar-part-has-task"></div></a><div class="h5p-progressbar-popup" aria-hidden="true">Slide 5</div></li><li class="h5p-progressbar-part progressbar-part-summary-slide"><a href="#" tabindex="-1"><span class="h5p-progressbar-part-title hidden-but-read">Slide 6 of 6: Summary. </span></a><div class="h5p-progressbar-popup" aria-hidden="true">Summary</div></li></ol> </nav>
dgcruzing
Tue, 03/06/2018 - 12:49
Permalink
Just had time to get back to
Just had time to get back to this.
Have tried on both sites I have got going.
I am wondering if its a theme thing going on as this seems to be the common denominator.
I have attached both Non-embedded and Embedded, as the problem only shows on embedded content.
Sorry, I don't know what to look for, have tried to look for differences but at this stage, they elude my untrained eyes.
Let me know any other snaps you may need.
thomasmars
Tue, 03/06/2018 - 15:19
Permalink
Hi, it seems like Moodle
Hi, it seems like Moodle theme styles are bleeding into the H5P content. You can add a quickfix for this to your site by adding the following css rule to your theme:
.h5p-course-presentation ol.list-unstyled { margin: 0; }We should find a better solution for this in the long-term though, I have created an issue for investigating and coming up with a better solution in the H5P issue tracker: https://h5ptechnology.atlassian.net/browse/HFP-1889.
Thanks for the feedback.
dgcruzing
Tue, 03/06/2018 - 16:08
Permalink
thomas, Tried it but not
thomas,
Tried it but not working on my side. this is what I have added into the custom CSS.
Saved and cleared theme cache.
/* H5P Course nav fix 06.03.18*/ .h5p-course-presentation ol.list-unstyled { margin: 0; }I have a pretty clean Custom CSS file at the moment. As you can see, there are only two other commands in there as due to the upgrade of Adaptable theme to 1.6.1
We have been debugging a few other problems that have arisen on the theme upgrade.
As noted, this is only happening on the iframed content - Not on the non-embedded content.
/* hide courses front page */ .pagelayout-frontpage #frontpage-course-list .paging-morelink {display:none;} /* H5P Document display */ } .hidden .joubel-create-document {display:block;visibility:visible;} { /* H5P Course nav fix 06.03.18*/ .h5p-course-presentation ol.list-unstyled { margin: 0; }thomasmars
Tue, 03/06/2018 - 16:29
Permalink
Curious, are you sure this
Curious, are you sure this custom css is loaded within the iFrame ? Do you have a public page where I can test this ? It's a bit hard to say what is going on without being able to inspect the elements, I'm quite certain that there's some selector overriding the styles of the CP.
Try inspecting the ol.h5p-progressbar.list-unstyled element for any selectors that may be overriding the margins for this element.
dgcruzing
Tue, 03/06/2018 - 16:56
Permalink
Thomas, Have a look to your
Thomas,
Have a look to your PM in the Moodle forums and log in details are still current for when we did the Document activity fix.
have given you a bit of info on where to find the RPL activity and you should be able to get a good idea of what is going on.
Got to sleep now.. its close to 2am here.. :-)
thomasmars
Wed, 03/07/2018 - 09:28
Permalink
Thanks, it seems like the css
Thanks, it seems like the css that you mentioned is not getting applied. There are some requests that are not found for css (404), perhaps this could be the reason why the css is not being applied. I would start looking into this and make sure that the css is applied to the H5P to start with.
dgcruzing
Wed, 03/07/2018 - 10:35
Permalink
Taken out a pluggin that was
Taken out a pluggin that was throwing most of the errors, and seems there is only a google fonts error getting thrown now.
Changing the development site back to Boost theme makes the problem go away. (Guessing this would happen on the production site as well).
Have left a message on the adaptable theme site to see if they can provide a way forward for us to debug this.
Also danjeffries, what theme are you using and Version.. just so we can compare notes.
I have just upgraded from Adaptable 1.5.1 - 1.6.1
dgcruzing
Sat, 03/10/2018 - 05:40
Permalink
fixed
Hi team ,
As per this thread and work around from Thomas on the custom CSS.
There is a fix if you happen to get this happening..
There needs to be a quick change back to Clean theme and Cache cleared to make sure the Custom CSS sticks.
Reference this thread..
https://moodle.org/mod/forum/discuss.php?d=366995#p1480219
Big Thanks Thomas for the CSS..and time.
I need to get dinner on the Melbourne H5P moot.. :-)
thomasmars
Mon, 03/12/2018 - 09:49
Permalink
Happy you got it working :)
Happy you got it working :) Thanks for the feedback, we'll look into getting a better solution where the H5P css is not affected by the surrounding theme/environment in the issue I mentioned previously.
danjeffries
Sun, 03/18/2018 - 11:17
Permalink
Woohoo!
Thank you for the CSS fix - that has worked straight away, without the need to revert to Clean or even clear the cache.
We use Lambda and using 3.3.
I would have replied earlier but didn't get any notifications for some reason :/
Great work :)
Dan