Size mismatch in "drag the words"

Hello
In “drag the words”, When I get html output from h5p and when I put the words in boxes, the size of the word’s box does not match the empty boxes and is smaller, while it’s true in h5p!
What should I do to solve this problem in html?
Thanks

H5P file: 
Content types: 

Screenshot from html

Attachments: 

Screenshot from size mismatch in html

Attachments: 
otacke's picture

Hi!

Have you been playing with CSS overrides maybe?

Cheers,
Oliver

No, I did not change it, and if I have to change it, I do not know where to change.

otacke's picture

Hi!

That's interesting, because the font that's visible on the screenshot doesn't look like what it normally looks on H5P. What browser have you been using on what platform?

Cheers,
Oliver

Hi!

I am using Windows (Windows 10) and Chrome browser.

Let me also say that I made this exercise in the Lumi editor.

BV52's picture

Hi mhm98,

Ahuh! FInally I understand what you meant with "HTML output" since AFAIK only the Lumi editor have a feature to export in HTML. Anyway I can see the issue but I'm afraid I can't help you with this issue. Sebastian one of the developers of Lumi frequents the forums and hopedully he will see this thread. You can also reach out to them directly, instructions are at the bottom of their website.

Tip: There is a reason for the questions and information request in this forum. Most of the time, if all or most of the information are provided members of the community will have an idea on what is causing the issue (e.g. content was created in Lumi and exported as HTML).

-BV

Hi

Anyway, thank you for your response and your friend for his response. If you reach a solution in the future, please let me know.

Thanks

otacke's picture

Hi mhm98!

This is not something that the H5P core team can fix. The problem arises in the export of Lumi that adds a couple of CSS classes to the HTML file. The Lumi team will have to fix this. Please report the issue in their github repository at https://github.com/Lumieducation/Lumi/issues - if nobody reports it, the problem may never go away. Feel free to add that this problem is caused by adding the MuiCSS theme without customization.

If you want to fix it manually yourself, then use a text editor to locate the string

"*, *::before, *::after":{boxSizing:"inherit"},

in the HTML file and delete exactly this bit, then save. You will have to do that for every file however.

Cheers,
Oliver

Hi Oliver

Thank you very much for your answers and tips.

The problem with that file was fixed manually.

Thanks!

otacke's picture

Good for you. But the problem remains for others, so it would be good if you filed a bug report at https://github.com/Lumieducation/Lumi/issues.

otacke's picture

Hi mhm98!

The problem still remains, and I could not find your error report at https://github.com/Lumieducation/Lumi/issues :-/ Do you need any guidance?

Cheers,
Oliver

otacke's picture

Hi mhm98!

I think you still have not created an issue reporting the problem that you found, have you?

Cheers,
Oliver

otacke's picture

Hi mhm98!

Still no bug report and no reply from you either.

This is one of the occasions that make me wonder why I help people here on the forum if they gladly let others solve their problems for free but don't give back anything in return.

Cheers,
Oliver

BV52's picture

Hi mhm98,

The content works properly here.

-BV

When I click "here", an error page opens that I will send it as an attachment

I also emphasize that the H5P format works properly but the HTML output has a problem, as shown in the screenshot I sent above.

Attachments: 
BV52's picture

Hi mhm98,

Sorry I was testing some settings in the back end and forgot the roll it back for this content. You should be able to access it now. As for your concern I am not sure what you mean with "the HTML output has a problem"

-BV

Hi

Thanks, it was visible and I saw.

I said before that the H5P format works well, but when we output it in html format and open it, becomes problematic and it happens as in the screenshot. That is, the problematic file format is HTML, Not H5P.