H5P Content edit page on WordPress appears completely blank

Submitted by slaato on Fri, 07/27/2018 - 09:01

Forums:

Content creation

Hello,

I'll follow the guidelines specified on top of this forum to describe this bug:

Detailed steps to reproduce the bug (exactly how and when did it happen)
In the WordPress admin view, when selecting H5P content from the left sidebar and clicking on a created content, it loads a page with absolutely nothing in it. No "Results" or "Edit" buttons and not even the "shortcode" blocks. All created new content appears this way, loading nothing to the page. We have multiple admins working on content on our website, and we have over 50 created H5P contents.

What is really peculiar, is that after loading the content on my mobile phone browser, it then loads normally using a desktop browser!!!
Platform and version number. E.g. Drupal, Wordpress, Moodle.
We are using WordPress 4.9.7 currently.
Mobile or Desktop
Desktop only. The content seems to load fine on my mobile phone (browser = chrome)
Browser: Chrome, Firefox, Safari etc
This bug appears on all browsers. (chrome, firefox and IE tested)
H5P plugin version
1.10.3
H5P content type and version (if a content type was used), and a sample URL or attached H5P.
Since the problem is regarding the loading of the edit mode of the content type and no shortcode is ever loaded, I am unable to provide an example URL.
Any browser console errors
Nothing appears on the browser console and no content is loaded.
Any PHP errors
I am unable to check these at the given time.
Screenshots if it's a visual problem

thomasmars

Mon, 07/30/2018 - 10:50

Permalink

If there are not errors in

If there are not errors in your browser's console I suspect this is a problem with the css of your page or your theme, that is conflicting with the H5P. This is further emphasized by the fact that it is showing properly on mobile, which may have a different set of css rules. Do you have a special WordPress theme or custom styling for the page ?

To determine that this is the issue for sure, we'd have to visit the page, or get the css affecting the H5P element/iFrame or screenshot of the element in your browser's console.

slaato

Mon, 07/30/2018 - 12:17

Permalink

Thanks for the quick reply

Hello!

Thank you for your fast reply. Our wepage URL is https://unips.fi in case you want to go take a look. We just recently changed our theme, which aligns with your theory about the theme css being the cause for breaking the H5P content edit screen.

Do you have any clues where to look for the H5Pelement/iFrame breaking css? (if that indeed is the culprit in our problem)

thomasmars

Mon, 07/30/2018 - 15:11

Permalink

Hi,I would need access to a

Hi,
I would need access to a page with the H5P to see what css is conflicting.
Alternatively you can check it out yourself by finding the H5P object on the site and inspecting it. This should give you some pointers on how to get started: https://developers.google.com/web/tools/chrome-devtools/css/

slaato

Mon, 12/03/2018 - 09:43

Permalink

Further knowledge of the problem

Hello,
we have observed that whenver we try to edit the H5P content online through our H5P plugin in WordPress AND there is an update available for that plugin, the whole editing interface will go blank and unresponsive.