Course Presentation - Responsive text-align problem
Submitted by febster on Thu, 05/11/2017 - 07:37
I recently realised this problem with my course presentation using the latest release of H5P.
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.
Thu, 05/11/2017 - 10:08
I tried reproducing the
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?
Thu, 05/11/2017 - 10:25
Here's the File
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.
Thu, 05/11/2017 - 10:42
I see that the font-size in
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.
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.
Fri, 05/12/2017 - 09:33
Yes, please let me know if
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?
Thu, 05/25/2017 - 15:05
Figured out the Bug
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!
Fri, 05/26/2017 - 06:25
Nice! We'll definitely look
Nice! We'll definitely look into this.
Sat, 05/27/2017 - 05:16
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:
Sat, 05/27/2017 - 20:46
Thank you for taking the time
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