Column and Accordion Content Cut-Off on Chrome

Submitted by bdhoot on Thu, 01/26/2023 - 22:22
Forums: 
Bugs in content types

 

The bottom of H5P content embedded in LearnDash lessons on WordPress site is recently cutting off at the bottom on Google Chrome browsers in the H5P plugin page and embedded content pages. Accordion text that is really long is also cut-off at the bottom.

  1. Detailed steps to reproduce the bug (exactly how and when did it happen): Noticed recently on Google Chrome desktop browser - may have coincided with recent Google Chrome update.
  2. Platform and version number. E.g. Drupal, Wordpress, Moodle: WordPress 6.1.1; LearnDash LMS 4.4.1.2
  3. Mobile or Desktop: Desktop only
  4. Browser: Chrome, Firefox, Safari etc: Google Chrome 109.0.5414.75
  5. H5P plugin version: Version 1.15.6
  6. H5P content type and version (if a content type was used), and a sample URL or attached H5P. Accordion 1.0.30; Column 1.13.1; See attached test accordion content. Paragraph of text below "What do we do with this information?" is cut-off. Column example not attached, but see screenshots below.
  7. Any browser console errors: No
  8. Any PHP errors: Unknown
  9. Screenshots if it's a visual problem: See below for Column example.
  10. Any recent changes to the environment (new plugins/modules, updates, configuration changes etc.): No
  11. Any recent changes to the browser you're using (new extensions, updates etc.): Chrome update recently

 

Example 1: Accordion Content

In editing page

 

Created Accordion Content (bottom paragraph cut-off)

 

Example 2: Column Content

Google Chrome (Column: content under "schedule a training time" is cut-off and jumps straight to navigation buttons)

 

Microsoft Edge (Column content and text visible)

H5P file: 
Binary Data effective-communication-transcript-108.h5p
Content types: 
Accordion
Column

bdhoot

Thu, 01/26/2023 - 22:30

Screenshots of the issue

Attachments: 
Image icon Accordian Text cut-off.jpg
Image icon Accordian Text Showing in Editing Page.jpg
Image icon All Column Content Visible in Microsoft Edge.jpg
Image icon Bottom of Column content cut-off on Google Chrome.jpg
otacke's picture

otacke

Fri, 01/27/2023 - 13:40

Hi!

 

Your content seems to be working nicely here (on Chrome). Are you sure there are no error messages on the browser's development console? Could you please post a screenshot?

 

Best,

Oliver

bdhoot

Fri, 01/27/2023 - 17:12

Thank you for your response, Oliver. I did some testing on a second laptop with the same version of the Chrome browser and it worked on that device, so maybe it has something to do with the size of the page on the first laptop. Because I was also able to see the full text via your link on device 1. Both devices have the same OS, chrome version, and chrome profile/extensions, but a different screen-size. The page where the content is embedded also shows the same errors on both devices, with only the second laptop showing the full text.
Attachments: 
Image icon Device 2 Same Browser, No Error.jpg
Image icon Device 1 Chrome Browser Error.jpg
otacke's picture

otacke

Fri, 01/27/2023 - 22:23

So there were error messages. Not sure if they are rhe cause here.

You say you're embedding content. How do you do that? Is the resize script included?

Best,

Oliver 

bdhoot

Fri, 01/27/2023 - 22:29

Yes, the error messages appear to be the same on both devices but the cut-off only happens on one. Embed is the wrong word, I input the h5p content shortcode in our LearnDash LMS lesson pages using the "Add H5P" button via the WordPress plugin. I do not use an iframe or other embed tool.

otacke's picture

otacke

Fri, 01/27/2023 - 23:24

That's rather odd then. Is there some link to the page that you could share?

murphybridget

Wed, 10/25/2023 - 08:58

Thank you for sharing.