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!

回答1:

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.

回答2:

I used CSS Only to get the same behavior...

Just create a container for the blockly editor with any size you want and position relative, then put a blockly editor inside with position absolute.

HTML Code:

<section id="blocklyContainer">
    <div id="blocklyDiv"></div>
</section>

CSS code:

#blocklyContainer {
  position: relative;
  width: 100%;
  height: 100vh;
}

#blocklyDiv {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

Here you have a CodePen to see: blockly resize

来源：https://stackoverflow.com/questions/36837896/is-there-another-way-to-resize-blockly-workspace

标签

css

blockly