Course Presentation - Responsive text-align problem

Submitted by febster on Thu, 05/11/2017 - 07:37
febster's picture
Forums: 
Bugs in content types

Hi H5P,

I recently realised this problem with my course presentation using the latest release of H5P.

https://screencast.com/t/YPczjsgM6

Essentially, the text within a course presentation does not maintain its page position, so when you re-size the window via your browser (I'm using Safari), the text gets all wonky and out of porportion with the rest of the page.

Curious if others can re-produce.

Manyy thanks!

Timothy

Content types: 
Course Presentation
icc's picture

icc

Thu, 05/11/2017 - 10:08

I tried reproducing the behavior you're seeing without any luck: https://h5p.org/node/74653

Are you combining images and text or using any special elements or fixes? 

febster's picture

febster

Thu, 05/11/2017 - 10:25

Hi there. Here's the file in question.

I'm using images and text on the page...Not sure if this will help but worth a try. Really bizarre.

Cheers!

Timothy

H5P file: 
Binary Data bpmf-letters-quick-overview-203.h5p
icc's picture

icc

Thu, 05/11/2017 - 10:42

I see that the font-size in your content is specified in px – which is an absolute number not relevant to its parent. I'm not sure how you were able to do that, but just must use something relative, like percent or ems.

febster's picture

febster

Thu, 05/11/2017 - 12:14

Yes, I've only created the font-size by clicking on the percentage in the past. I created a lot of the fonts on the page through copying and pasting previously created text...so, I'm not sure if that is where the bug lies.

Here's my explanation: https://screencast.com/t/2JDIowCzfeSW

It is fixed now...but I think there's a bug somewhere in the works yet.

Cheers! 

Timothy

icc's picture

icc

Fri, 05/12/2017 - 09:33

Yes, please let me know if you figure out the exact steps to get the incorrect font-size. Could it have been copied from somewhere else? 

febster's picture

febster

Thu, 05/25/2017 - 15:05

Yes, I've figured out the bug. 

Here's what it is:

1. Create text (bigger than 100%) within a course presentation, then save the course presentation.

2. Go back into edit the course presentation. Go back to the text you previously created.

3. Open the text edit box, as if to change the text you previously created.

4. Select all the text (highlight it all) with the idea to replace the text with completely new text which will delete the previous text by simply beginning to type.

5. Type in new text. Then click update the text. You'll then notice that the font-size has changed from a percentage to px size. Thus, the responsive issue arises where text will not stay properly aligned.

Took me a little bit experimenting but that seems to be the problem. Hopefully you can recreate it!

Best, Timothy

BV52's picture

BV52

Fri, 05/26/2017 - 06:25

Nice! We'll definitely look into this.

febster's picture

febster

Sat, 05/27/2017 - 05:16

Hi there.

Sorry, I here's the definitive reason where the bug is and why...sorry, I didn't understand it completely last time I posted. Hopefully this clarifies:

https://screencast.com/t/iGQhCOpFcUo

Cheers!

Timothy

icc's picture

icc

Sat, 05/27/2017 - 20:46

Thank you for taking the time to create such a detailed explanation of the issue. This makes it much easier to understand – Hats off to you, sir.

I believe this is an issue with the version of CKEditor being used inside H5P. I've created an issue for following up the problem and finding a solution in our official tracker, you may follow the process here: HFP-1141