Resizing of Drag and Drop Activity

Submitted by twc57 on Fri, 05/08/2020 - 05:03
twc57's picture
Forums: 
Content creation

Hi... I'm on a 2015 Mac book Pro. The Chrome Browser version is: 81.0.4044.129 (Official Build) (64-bit). The H5P plug-in version in Wordpress(5.4.1) is: 1.15.0. Everything with content creation content is fine. My problem is that after I publish the activity, it appears very large in the resulting browser window in both Chrome and Safari. I think I might be missing something. I am including a screen capture video of the problem which I hope helps. Thank you.

https://www.screencast.com/t/gWBsIhwmTw

Content types: 
Drag and Drop
otacke's picture

otacke

Fri, 05/08/2020 - 11:31

Hi twc57!

The setting in Drag and Drop is a little misleading. It's not the resulting size when viewing the content, but the internal dimensions for sizing and positioning when creating the dropzones, etc.

By default, any H5P content type will use the full width that's available given by the host system. In your theme's stylesheet - or whatever it might be called depending on your host system, you could limit the width of the h5p-iframe-wrapper element by something like

.h5p-iframe-wrapper { width: 300px; }

or something similar. However, this will be then be used for all content types. There's a slightly more complicated way described in the customization documentation (https://h5p.org/node/2692) called alter_styles hook. This one would allow to at least restrict those changes to Drag and Drop only.

Beyond that, there's no good way. The H5P core team is aware of this problem, and you can track progress of a solution at https://h5ptechnology.atlassian.net/browse/HFP-1416, but I don't think this is a high priority issue right now.

Best,
Oliver