Interactive Book Height Too Much (due to content table)

Submitted by martin_1234 on Thu, 04/03/2025 - 11:34
Forums: 
Bugs in content types

Hi! 

When I use the interactive book, the height of the box is too much and it has a lot of white space.

It looks like this: https://imgur.com/a/Ip3p3cc

This is clearly because the content table on the left (which is not opened) is long and it drags out the entire box.

How can I fix it? It needs to resize based on content, not the content table.

Moodle 4.5.3
Latest H5P downloaded today

UPDATE:

This problem is not present on another instance of Moodle that I'm running (4.5.1) on a different server with Ubuntu 22.04. 

Everything is sized appropriately there. Any idea why this happens?

martin_1234

Thu, 04/03/2025 - 12:21

This problem is not present on another instance of Moodle that I'm running (4.5.1). 

Everything is sized appropriately there. Any idea why this happens?

martin_1234

Thu, 04/03/2025 - 18:08

When I use the interactive book, the height of the box is too much and it has a lot of white space.

It looks like this: https://imgur.com/a/Ip3p3cc

This is clearly because the content table on the left (which is not opened) is long and it drags out the entire box.

How can I fix it? It needs to resize based on content, not the content table.

Moodle 4.5.3
Latest H5P downloaded today

UPDATE:

This problem is not present on another instance of Moodle that I'm running (4.5.1) on a different server with Ubuntu 22.04. 

Everything is sized appropriately there. Any idea why this happens?

otacke's picture

otacke

Thu, 04/03/2025 - 18:39

"This is clearly because the content table on the left (which is not opened) is long and it drags out the entire box."

I am not convinced of that, because the whole menu receives `display: none` when it's collapsed and thus has no size at all.

Sometimes, moodle themes or other customizations can interfere with H5P resize mechanism. Could as well be some forgotten CSS customization that has side effecte. It's always a good idea to check a against a reference, e.g. a "naked" moodle like the moodle sandbox in order to locate the source of the issue. You could also try to resize the browser window in order to check whether anything changes to add some info, but ultimately, without being able to investigate this live, this may not be solvable feasibly.

martin_1234

Thu, 04/03/2025 - 19:13

Hey! Thanks for the reply.

I've double checked the CSS and it's identical on both versions of Moodle.
"Additional HTML" is empty on both instances of Moodle.
I've now tried it on 3 or 4 clean installs of Moodle 4.5.3, always yielding the same result (white space).
I've also tried it on MoodleCloud, yielding the same result (white sapce).
Resizing changes nothing (the proportions remain exactly the same, the amount of white space is the same. Or it gets worse if I make the window too narrow).
I'm using the standard Boost theme.

The sandbox Moodle yielded the same result: https://imgur.com/a/QrZpD0K

I'm guessing it's a compatibility problem with 4.5.3?? 


martin_1234

Thu, 04/03/2025 - 19:13

Hey! Thanks for the reply.

I've double checked the CSS and it's identical on both versions of Moodle.
"Additional HTML" is empty on both instances of Moodle.
I've now tried it on 3 or 4 clean installs of Moodle 4.5.3, always yielding the same result (white space).
I've also tried it on MoodleCloud, yielding the same result (white sapce).
Resizing changes nothing (the proportions remain exactly the same, the amount of white space is the same. Or it gets worse if I make the window too narrow).
I'm using the standard Boost theme.

The sandbox Moodle yielded the same result: https://imgur.com/a/QrZpD0K

I'm guessing it's a compatibility problem with 4.5.3?? 

martin_1234

Thu, 04/03/2025 - 19:14

Hey! Thanks for the reply.

I've double checked the CSS and it's identical on both versions of Moodle.
"Additional HTML" is empty on both instances of Moodle.
I've now tried it on 3 or 4 clean installs of Moodle 4.5.3, always yielding the same result (white space).
I've also tried it on MoodleCloud, yielding the same result (white sapce).
Resizing changes nothing (the proportions remain exactly the same, the amount of white space is the same. Or it gets worse if I make the window too narrow).
I'm using the standard Boost theme.

The sandbox Moodle yielded the same result: https://imgur.com/a/QrZpD0K

I'm guessing it's a compatibility problem with 4.5.3?? 

martin_1234

Thu, 04/03/2025 - 19:15

I can make a public example and share the user password with a link to the activity if investigating live is going to help.

otacke's picture

otacke

Thu, 04/03/2025 - 19:40

You could begin with sharing the content, so someone can try to reproduce it. I had a go on the sandbox with some content (lots of chapters) and everything looked normal.

martin_1234

Thu, 04/03/2025 - 19:16

Regarding the table of content - I suspected it was its fault because in activities where I have 7 or fewer pages (and the content table is short) this problem does NOT appear! So I'm guessing it IS connected to it in some way.

otacke's picture

otacke

Thu, 04/03/2025 - 20:47

Your content is using InteractiveBook 1.3.5. That version has been outdated since December 2021. The current version is 1.11.3.

It's in fact the menu that in your version does not get the `display: none` styling, but that is likely a bug that has been fixed during the last 3 years.

All you have to do is to upgrade the content to the newest version. Here's a post about why one should do this and how.

martin_1234

Thu, 04/03/2025 - 21:27

Omg nevermind, you were right!!!!!!!!!!

I edited the activity and saved it again to update the libraries, and it suddenly displays properly!

Thanks SO much I spent 8 hours on this!!!!!!!!!!!!!!

martin_1234

Thu, 04/03/2025 - 21:31

Omg nevermind, you were right!!!!!!!!!!

I edited the activity and saved it again to update the libraries, and it suddenly displays properly!

Thanks SO much I spent 8 hours on this!!!!!!!!!!!!!!

otacke's picture

otacke

Thu, 04/03/2025 - 21:49

I just know what pipe to bang on ;-)