Pb with fullscreen

104 views
Skip to first unread message

Eddy Fras

unread,
Jun 9, 2021, 12:33:51 PM6/9/21
to Blockly
Hi all,
I have the same issue as other users with blockly in fullscreen mode :

But even when calling the setParentContainer() method, the widget, dropdown and tooltip divs are still added in <body>, not in my target element.
I'm using Blockly.js v5.20210325.0

Here is my code snippet :

const options = {
collapse: true,
comments: true,
media: "img/",
trashcan: false,
zoom: { controls: true, wheel: false },
renderer: "zelos",
scrollbars: true,
move: { drag: true, wheel: true },
hasSounds: false,
};
let blocklyArea = document.getElementById('blocklyarea');
let blocklyDiv = document.getElementById('blocklydiv');
Blockly.setParentContainer(blocklyArea);
let workspace = Blockly.inject(blocklyDiv, options);
let xml = Blockly.Xml.textToDom("...");
Blockly.Xml.domToWorkspace(xml, workspace);
var onresize = function() {
var element = blocklyArea;
var x = 0;
var y = 0;
do {
x += element.offsetLeft;
y += element.offsetTop;
element = element.offsetParent;
} while (element);
// Position blocklyDiv over blocklyArea.
blocklyDiv.style.left = x + 'px';
blocklyDiv.style.top = y + 'px';
blocklyDiv.style.width = blocklyArea.offsetWidth + 'px';
blocklyDiv.style.height = blocklyArea.offsetHeight + 'px';
Blockly.svgResize(workspace);
};
window.addEventListener('resize', onresize, false);
onresize();
Blockly.svgResize(workspace);
Blockly.getMainWorkspace().zoomToFit();
...

and my html snippet :

...
<div id="blocklyarea">
<div id="blockly">
<div id="blocklydiv"></div>
</div>
</div>
...

Any idea why this doesn't work for me ?

Thanks for your help !

Maribeth Bottorff

unread,
Jun 9, 2021, 9:26:48 PM6/9/21
to Blockly
Hi, is your problem only with the code snippet above, or specifically when you call `requestFullscreen`? Because I copied your code into a playground and it was working fine for me. I verified dropdown divs were added to `blocklyArea` and not `body`

Is the problem just in full-screen mode? If so, could you share the code where you're activating full screen? One thing to note is you'd have to call `blocklyArea.requestFullscreen()` (not `blocklyDiv`) so that the element you put into full screen includes the widgetDivs.

If that isn't it, please let us know so we can keep looking into this. Thanks!

Eddy Fras

unread,
Jun 10, 2021, 3:15:24 AM6/10/21
to Blockly
Thanks for your answer Maribeth !
Sorry, I forgot to share that part of code but right, I'm calling requestFullscreen on the blocklyArea element  :

...
fullScreen() {
document.getElementById("blocklyarea").requestFullscreen();
}
...

The problem is only when switching to fullscreen mode, I have no issue before or when I switch back to "normal" mode.

I forgot also to say that I'm using Vue.JS framework so it's quite impossible to share the whole view that has several depedencies.

Here is attached a screenshot of the Chrome dev tools, showing the <divs> inserted under <body> :

Thanks again !
Screenshot from 2021-06-10 09-10-32.png

Eddy Fras

unread,
Jun 10, 2021, 3:52:51 AM6/10/21
to Blockly
Sorry again, it seems that the fullscreen problem is fixed actually, it was a cache issue :(
Now, calling setParentContainer() method has a side effect on "normal" mode, when editing a field. The text is duplicated outside the field and the tooltip is displayed aside this second text, as shown in attached screenshot.

Screenshot from 2021-06-10 09-44-34.png

Maribeth Bottorff

unread,
Jun 10, 2021, 5:05:01 PM6/10/21
to Blockly
Does this comment apply to your situation? https://github.com/google/blockly/issues/4383#issuecomment-736093296

If so, you might have a problem with your positioning that can be fixed with css. If that's still not it, we'll keep looking :)

Eddy Fras

unread,
Jun 11, 2021, 5:37:53 AM6/11/21
to Blockly
That's it, setting position: fixed to the 3 divs worked perfectly for me, in both "normal" and fullscreen modes !
Thanks a lot for your support :)

Reply all
Reply to author
Forward
0 new messages