Dropdowndiv position issue

sharmasa...@gmail.com

unread,

Aug 4, 2020, 9:15:05 AM8/4/20

to Blockly

Hi,

I am using HTML full screen API to set blocklyDiv to the full screen

so i placed dropdowndiv, widgetdiv and tooltip inside same div but it leds to an issue in dropdown position for every block like this

Here is the code

html

JS

What am i missing here?

P.S. I called fullscreen to the BlocklyDiv and dropdowndiv position is perfect in full screen mode

Thanks in advance :)

Sam El-Husseini

unread,

Aug 4, 2020, 8:04:47 PM8/4/20

to Blockly

Hello,

You're actually very close (Setting the CONTAINER_ELEMENT on each of the WidgetDiv, DropdownDiv and Tooltip was part of the initial design but that was changed to a single call to Blockly.setParentContainer:

Blockly.setParentContainer(blocklyDiv);

You do have to call this before the first Blockly.inject call.

The other thing to point out is that the container element has to be a HTML element (Just pointing that out as you've set it to the workspace above)

Here's an example:

var blocklyDiv = document.getElementById('blocklyDiv');
Blockly.setParentContainer(blocklyDiv);
var workspace = Blockly.inject(blocklyDiv, {
   ...
});

// Request full screen, on button click:
blocklyDiv.requestFullscreen();

Let me know if that helps.

Cheers,

Sam

sharmasa...@gmail.com

unread,

Aug 5, 2020, 12:58:17 AM8/5/20

to Blockly

Thanks for the reply, but it didn't work :(

var blocklyDiv = document.getElementById('blocklyDiv');

Blockly.setParentContainer(blocklyDiv);

var workspace = Blockly.inject(blocklyDiv, {

            media: "/media/",

            grid: {
                spacing: 20,
                length: 3,
                colour: '#ccc',
                snap: true
            },

            move: {
                scrollbars: true,
                drag: true,
                wheel: true
            },
            zoom: {
                controls: true,
                // wheel: true,
                startScale: 0.9,
                maxScale: 3,
                minScale: 0.3,
                scaleSpeed: 1.2
            },
            toolbox: document.getElementById("toolbox")

});

If there is any alternative , please let me know

Sam El-Husseini

unread,

Aug 5, 2020, 9:09:32 AM8/5/20

to Blockly

Nothing stands out to me in the code snippet you sent.

What version of Blockly are you using? Let's make sure you're on the latest version (or at least a version that includes that API call)

Are you seeing the same original issue when you call Blockly.setParentContainer?

Could you also verify through the browser's developer tools that the <div class="blocklyWidgetDiv">...</div> is placed under the <div id="blocklyDiv"> element and not the <body> element.