Layout issue somewhere between Blockly and Chromium (or Angular)?

[Clément Contet]

Hi,

I'm having a strange issue but I'm not sure where the origin is.

When I open directly this URL in Chrome (or Edge Chromium): https://www.supercodingball.com/code/offline/do-nothing, the BlocklySvg element is not correctly sized.

It is 150px tall and its width is not correct either (see attached).

Then if I resize the window, the elements sizes are immediatly computed correctly again.

What is surprising, is that if I go to the parent page (https://www.supercodingball.com/offline-opponents) and click any link to go to the child page, everything is fine.

Even stranger, I don't reproduce the issue with Firefox.

And I don't reproduce either with Chrome when running the application on my local computer!

I've tracked Blockly repo for this 150px constant, but I can't find it.

Do you have an idea where the problem could come from; so that I can file an issue?

PS1: I use Blockly 6.20210701.0 but it was the same with former version.

PS2: the code for the component with Blockly is here https://github.com/Orange-OpenSource/super-coding-ball/tree/main/src/app/components/blockly

Thanks!

Clément

[co...@cortscorner.net]

I believe it is related to the "Disappearing workspace" issue that was raised in an earlier thread and this issue (https://github.com/google/blockly/issues/5404). The height isn't set at all, and the 150px appears to be from the content of the svg, so you won't find that 150px constant in the repo.

Triggering a resize event with "window.dispatchEvent(new Event('resize'));" will fix it.

[Clément Contet]

Thanks! 

Triggerring the resize event did indeed work (but I had to trigger it after a 100ms timeout, otherwise it was not taken into account)

==> https://github.com/Orange-OpenSource/super-coding-ball/blob/6e68515c18b280073d5456868c8da717cee37aca/src/app/components/blockly/blockly.component.ts#L128-L135