Google Blockly - Append toolbox to a separate div

Question

I've been trying out Blocky to develop a simple animation based application and faced this issue. As mentioned in the docs, I create the xml tree structure of my toolbox, then when I create a new instance of Blockly, it will append the toolbox to that particular div.

Ex:

var workspace = Blockly.inject('blocklyDiv', {
            media: './media/',
            toolbox: document.getElementById('toolbox'),
            trashcan: true
        });

Although it works well, it doesn't let us decide the place where we want to keep the toolbox. In my application, I wanted to place the toolbox separate from the workspace (in a separate div), but I couldn't find any guide to do that in their documentation.

Can someone help me with this?

score 4 · Accepted Answer · answered Aug 18 '17 at 08:54

Answering my own question as I didn't get any responses :)

As of now, blockly doesn't have an option to keep the toolbox in it's own container out of the injectionDiv (which it creates by default). So a workaround would be to wait until Blockly creates the injectionDiv, flyout, workspace, and then dynamically change the positions of the toolbox within the injectionDiv.

You can also append any other elements you need inside the injectionDiv and change their positions dynamically. You may need to change some core values depending on what you are doing. Basic idea is that you need to keep everything inside the injectionDiv :)

Google Blockly - Append toolbox to a separate div

1 Answers1