Question

我正在尝试将我的Blockly workspace调整为div。我希望如果页面变小，div和它内部的Blockly workspace也会变小。

我知道Google在documentation中提供了一种方式，但我认为它有点＆＃34;脏＆＃34;并且你必须使用大量代码来调整它。

查看Google Chrome的调试器，我发现我可以将max-height设置为svg对象但我不知道如何在注入时更改height工作区：

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

无论如何，它根本无法解决我的问题（只是避免在调整页面大小之前工作区会比div大）。

我还尝试更改blocklyDiv，其中Blockly workspace注入display: flex;，但它不会改变任何内容。

是否有比Google's示例更好的方法来调整Blockly workspace？

的大小

提前致谢！

Answer 1

正如我在上面的评论中所说，我允许宽度调整大小同时修复块状div中的高度。

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

在这里你可以使用JSFiddle： blockly workspace resizing

Answer 2

我只使用CSS来获得相同的行为......

只需为你想要的任何大小和位置相对的块状编辑器创建一个容器，然后将一个块状编辑器放在绝对位置内。

HTML代码：

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

CSS代码：

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

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

您可以在此处查看CodePen：blockly resize

Answer 3

我通过使用Blockly.svgResize api解决了此问题，请注意，如果大小随过渡而变化，则必须设置一个超时函数并在超时的回调中调用api，延迟就是过渡时间。

是否有另一种方法来调整Blockly工作区的大小？

3 个答案: