Issue with displaying in Moodle

Issue with displaying in Moodle

by Fabián H -
Number of replies: 10

Hi there,

I have a small issue with Moodle and H5P. For example the "Find the words" activity is too big for my laptop screen for example. I can use this one without any problems on my 22-inch display on my normal PC. Is there anything what I can do, that all activities which I create in Moodle with H5P will display correctly on laptop screens?

Thanks a lot

Average of ratings: Useful (1)
In reply to Fabián H

Re: Issue with displaying in Moodle

by Stuart Mealor -
H5P is HTML5, so will size to it's container (e.g. the page width) - unless you are using some code to set a width.
Average of ratings: Useful (1)
In reply to Stuart Mealor

Re: Issue with displaying in Moodle

by paddy ward -
Hi Stuart,

I am using a range of H5P which I want to include in Moodle as embedded elements in labels within a normal course section, interspersed with labels containing text etc.
The issue I keep coming up against is that, regardless of the dimensions of the iframe in the embed code, when I turn editing off, the H5P elements all take up only around 70% of the available space in the label. Although the container is considerably bigger than the embedded H5P, I have also noticed that the iframe will resize itself after saving.

The simplest solution would be to use a Column but I want to use a combination of H5P and other embedded elements (for instance Padlets). If I use a column and then embed it, I immediately face this same issue; the course looks unaligned and unappealing and does not engage in the same way the column does when not embedded.

Is there something glaringly obvious I am missing? Huge fan of H5P and it's potential to really transform online learning spaces, so really hope you can shed some light on this.

cheers,

Paddy
Average of ratings: -
In reply to paddy ward

Re: Issue with displaying in Moodle

by paddy ward -
Sorry, just thought this might clarify things (or not)
Here is the code for one of the labels:

<p style="text-align: center;"><iframe src="https://learning.wintec.ac.nz/mod/hvp/embed.php?id=1530601" width="800" height="625" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>
<script src="https://learning.wintec.ac.nz/mod/hvp/library/js/h5p-resizer.js" type="text/javascript"></script>
<p><iframe src="https://learning.wintec.ac.nz/mod/hvp/embed.php?id=1530601" width="1119" height="865" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>
<script src="https://learning.wintec.ac.nz/mod/hvp/library/js/h5p-resizer.js" type="text/javascript"></script>

As you can see the first iframe is 800 wide and the second is 119 wide. However, after I save it and then check the embed code for each this is what I get:

two iframes

These are, by the way, the same embedded item repeated and the original has the dimensions of the second iframe; the first was that size originally but changed when I saved the label. Why the second didn't is a bit of a mystery, frankly. I have tried using 100% for the width, taken out the resizer script as well embedding into the top of the section (as opposed to in a label) which resulted in a slightly larger display, but not significantly. Nothing has been successful so far and can't find reference to this behaviour anywhere else. 
By the way, I have also changed theme to Boost but that had no impact.

Sorry for the essay!

Average of ratings: -
In reply to paddy ward

Re: Issue with displaying in Moodle

by John Provasnik -
Picture of Particularly helpful Moodlers Picture of Testers
If it helps, I have issues when I do not delete the script -- deleting that script corrects the display issues I see when viewing an iframe. That script is for resizing -- I dont want mine to resize because I want them to respect the length/width dimensions set in the iFrame code.
Average of ratings: Useful (2)
In reply to paddy ward

Re: Issue with displaying in Moodle

by Beatriz Rojo -
Hi Paddy,
thanks for the description of your problem, it's interesting to know this kind of thing happens not only to me. I have a question regarding the Column. When I add an image, no matter the size of it, it's automatically zoomed so that it occupies the whole space of a screen (in a notebook or in a 30" monitor), so that it's huge and pixelated. I have given up using the column and use the Moodle book instead. Is it something similar to the general problems you're facing?
Thanks
Average of ratings: -
In reply to Beatriz Rojo

Re: Issue with displaying in Moodle

by Akshay Acharya -
This is the exact issue i am facing, i use several H5P content , and it seemingly occupies majority of real estate available on my LMS site. I have tried reading upon iframe preferences and i believe it resizes based on the Display being used.. but thats not happening. I have installed the LTI Message Handler to deal with this, but it changed nothing.. have you found a workaround on this .. can you please help me
Average of ratings: -
In reply to Fabián H

Re: Issue with displaying in Moodle

by Beatriz Rojo -
Hi Fabián,
I also think this is a weak point of H5P and hope in the future it will improve. It never happened to me with the "Find the words" activity - only in activities that include an image.
Average of ratings: -
In reply to Fabián H

Re: Issue with displaying in Moodle

by Benjamin Waller -

Hello Fabian,

I don't know if this will help you or not but I ran into an LTI iframe sizing issue in Moodle and it is basically the way it handles iframes and in my case, my H5P content was being cut off, or hidden. See screenshot. 

Anyways the solution for me was to install this following plugin LTI sources (LTI Message Handler) to fix my issue. But this is probably not the same issue you are facing. 

When testing Find the words with dev tools in Chrome from H5P.org (Durpal) example, the frame resizes as expected. And the screenshot shows a 440 x 528 px responsive phone size which would be a lot smaller than your tablet. So I would suggest it is a Moodie issue, not H5P. 


Best regards,

Ben

Average of ratings: Useful (2)
In reply to Benjamin Waller

Re: Issue with displaying in Moodle

by Nicolas Romero -
Hi Ben,

after installing that plugin, did you change anything else?

I have the issues with h5p activities getting randomly scroll bars, because the resize does not apply correctly. And it is really random.

After installing the plugin you mentioned i still have the issue.

Kind regards,
Nicolas Romero
Average of ratings: -
In reply to Benjamin Waller

Re: Issue with displaying in Moodle

by Akshay Acharya -

Hello Benjamin , I request your advice on the following issue 

 I am having some trouble in my H5p content Frame size and Its Display on my Moodle LMS ... Like if i use  AGAMOTTO ( Image Blender ) , i upload all the relevant pictures , but after Clicking on Save & Display  , that content has a  Frame Size of 1544 x 1586  Resolution ..  It just makes it very huge for reading..  Just unable to understand what to do , do i have to do some changes in the script of my browser CSS / HTML or is their a workaround on this..   I have read that these containers and their sizes often times change as per the resolution of your display , mine is Full HD screen ,  and i am using H5p Content on my MOODLE LMS site .. Could you please help me ?

As you can see in the attached picture, the container size is huge.. Also i followed the following tips 
Setting up H5P.com in Moodle - H5P.com
Moodle plugins directory: LTI Message Handler 

But despite this the issue remains the same. Can you suggest what to do .. 

Attachment LMS 1.jpg
Average of ratings: -