Pictures in "drag and drop" distorted (because of a 100% height CSS attribute)

Submitted by Realia on Sun, 06/16/2019 - 23:27
Forums: 
Bugs in content types

Hello there !

It seems that something has been changed in the "drag and drop" content types because the pictures that were correctly displayed before are now displayed in a funny way : they are very distorted. It is because a CSS inline style "height: 100%;" is applied to them instead of a "height: auto;". Here is a demo of the "bug" (this is "alphabook" content, but the same distorsion occurs with the "drag and drop" standalone content type ; I've tested to make sure : https://orthophile.jimdofree.com/2019/04/02/expressions-imag%C3%A9es/ (you'll have to click on the sceenshot to open the activity ; for a reason that I couldnt figure out, I could not embed the alphabook content the way I do with the other content types - through iframe.)

Is there something on my end that I can change in order to get the pictures correctly displayed ? Any help would be appreciated :)

Thanks !

Isabelle

Content types: 
Drag and Drop
BV52's picture

BV52

Mon, 06/17/2019 - 07:11

Hi Isabelle,

Thank you for reporting this. In order to give your bug report the best chance of getting answered, please include the following information:

  1. Detailed steps to reproduce the bug (exactly how and when did it happen)
  2. Platform and version number. E.g. Drupal, Wordpress, Moodle.
  3. Mobile or Desktop
  4. Browser: Chrome, Firefox, Safari etc
  5. H5P plugin version
  6. H5P content type and version (if a content type was used), and a sample URL or attached H5P.
  7. Any browser console errors
  8. Any PHP errors
  9. Screenshots if it's a visual problem
  10. Any recent changes to the environment (new plugins/modules, updates, configuration changes etc.)
  11. Any recent changes to the browser you're using (new extensions, updates etc.)

The more information you provide, the quicker the community will be able to fix it and the quicker you'll have a working solution!

On a side note embed is not yet working for Interactive Book and there is a pending bug report for it.

-BV52

Realia

Wed, 06/19/2019 - 21:24

Hello,

Thanks for your reply. I thought that the content I provided in my link was enough but here is a complete report :

  1. Detailed steps to reproduce the bug (exactly how and when did it happen) : Create a "Drag and drop" content, as usual, using pictures to drag and drop. The pictures look great when I edit the content. They appear completely distorted when I run the content (preview button in H5P for Wordpress) and also when it is embedded of course.
  2. Platform and version number. E.g. Drupal, Wordpress, Moodle. : Wordpress last version (Version 5.2.2)
  3. Mobile or Desktop : both
  4. Browser: Chrome, Firefox, Safari etc : bug happens with Chrome, Safari, Firefox
  5. H5P plugin version : the last one (updated all libraries and hub today)
  6. H5P content type and version (if a content type was used), and a sample URL or attached H5P : Drag and Drop version 1.13.4
  7. Sample URL : https://www.exercices-numeriques.fr/wp-admin/admin-ajax.php?action=h5p_embed&id=242
  8. Any browser console errors : none
  9. Any PHP errors : none
  10. Screenshots if it's a visual problem : http://www.awesomescreenshot.com/image/4086700/f9d9feebeaecb09f24cdc22dffea1767 
  11. Any recent changes to the environment (new plugins/modules, updates, configuration changes etc.) : none, except updating H5P
  12. Any recent changes to the browser you're using (new extensions, updates etc.) : none, except keeping Chrome updated (Safari and Firefox were not updated and the bug is visible yet).

I hope that this is complete and that the bug will be solved soon.

Greetings,

Isabelle

BV52's picture

BV52

Fri, 06/21/2019 - 03:15

Hi Realia,

Can you please double check this looks normal on my end. I've also checked this using a smaller window and everything adjusts accordingly.

-BV52

Attachments: 
Image icon Screen Shot 2019-06-21 at 9.07.37 AM.png