Repository navigation
HtmlPanel contains <div> with hardcoded(?) 100x50 size. #988
Description
Marian Ryt asked 2017-08-04 14:12:04 UTC
Hello,
I've been trying to get the H5P Framework to work in a Wisej application. Everything seems to be working now except for one thing: The HtmlPanel that "hosts" the H5P content contains a
which appears to have a fixed size of 100px * 50px, specified directly in its "style" attribute. If I remove these properties from the style or resize the panel (e.g. by resizing the window) everything seems to work. The div isn't part of my code, it also has the "qx-widget" class.
After removing the width and height properties it all works:
Is there any way to either remove/disable this div (or its width and height properties), or have its size updated? I guess it might have to do with H5P being loaded after the size of the div is set.
Activity
itg-assistant commentedon Jun 12, 2026
Luca answered 2017-08-05 00:18:12 UTC
It's not hard coded, it's calculated when the content is displayed, when the size of the HtmlPanel is changed, and when the scrollbars are forces off. It's necessary to calculate it to manage the container's scrollbar since we use themed scroll bars.
If the internal html content runs some javascript that dynamically changes the size of the html content, it will not update the container. There is no javascript event on an element changing the size. There are two ways to do this, one is to start a timer and periodically resize, the other is to trigger the resize when the content is resize in case the javascript library (H5P?) fires some event when is rendered.
Try to increase the height of the HtmlPanel by 1 pixel after the H5P content is fully displayed and let me know if the content is resized. In case I can give you a simple javscript that triggers the resize on a timer.
itg-assistant commentedon Jun 12, 2026
Marian Ryt answered 2017-08-29 02:51:59 UTC
Hi,
I wanted to come back to this issue: Changing the size of the HtmlPanel does indeed work. But it's kind of ugly to do it periodically. I'd like to ask if you could give me the JS code that triggers the resize. I have the Wisej JS loader invoke a JS callback when it is done loading the H5P scripts, so I guess this would be a perfect place to trigger a resize.
Thanks,
Marian
itg-assistant commentedon Jun 12, 2026
Luca answered 2017-08-29 17:11:43 UTC
The event is "resize" and the handler is __onPaneResize and the resize method is __updateHtmlSize. The "resize" event is fired by the inner "pane" which is the scrollable container that contains the custom html in a wisej.web.ScrollableHtmlPanel javascript class.
You need to have the instance reference to the wisej.web.ScrollableHtmlPanel widget to invoke a resize. But you have it in "this" you can do:
this.__updateHtmlSize();
If you know where it is, lets say it's a control in the MainPane, you can do this:
App.MainPage.htmlPanel1.__updateHtmlSize();
Your entire control object model available by name and hierarchy in the browser under App. So if htmlPanel1 is a child of panel1, you have to refer to it as:
App.MainPanel.panel1.htmlPanel1.__updateHtmlSize();
You can explore the object model easily with F12 and type App.
Also, the entire source code for all Wisej widgets is available in clear when running in debug mode at http://localhost/resource.wx/wisej.js and http://localhost/resource.wx/qx.js. You can step in, debug it, and even change it.
itg-assistant commentedon Jun 12, 2026
Marian Ryt answered 2017-08-30 17:50:41 UTC
I'm implementing this inside a Widget, so I have a reference to the Widget in the InitScript. This also allows me to access the HtmlPanel.
Calling __updateHtmlSize() in the wisej.utils.Loader.load callback appears to work. Thanks!