cssblockly

Is there another way to resize Blockly workspace?

I am trying to adapt my Blockly workspace inside a div. I want that if the page makes smaller, the div and the Blockly workspace inside of it would be smaller also.

I know that there is a way that Google provides in its documentation but I think it is a bit "dirty" and you have to use a lot of code to resize it.

Looking at the debugger of Google Chrome I saw that I can set a max-height to the svg object but I do not know how to change that height when you inject the workspace:

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

Anyway, it will not solve my problem at all (just avoid that the workspace would be bigger than the div before resizing the page).

I also tried changing my blocklyDiv in which I inject the Blockly workspace to display: flex; but it does not change anything.

Is there a better approach than Google's example to resize the Blockly workspace?

Thanks in advance!

Solution

  • As I said in above comment, I allow width resize while fixing the height in the blockly div. 

    <div id="blocklyDiv" style="height: 800px; width: 100%;"></div>

    Here you have the JSFiddle to play with: blockly workspace resizing.