Есть ли другой способ изменить размер рабочего пространства Blockly?

Question

Я пытаюсь адаптировать мой Blockly workspace внутри div. Я хочу, чтобы, если страница будет меньше, div и Blockly workspace внутри нее будут меньше.

Я знаю, что существует способ, которым Google предоставляет в своем documentation, но я думаю, что он немного «грязный», и вы должны использовать много кода для его изменения.

Глядя на отладчик 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