A good web application will resize Blockly to fill the available space on screen rather than being a fixed size. There are several ways to do this, including using an iframe, CSS, and JavaScript positioning. This page demonstrates an overlay approach which is robust and flexible.
This is a three-step process. The first step is to define the area. The second step is to inject Blockly. The third step is to position Blockly over this area.
Define Area
Using either an HTML table or a div
with CSS, create an empty area that
reflows as the page is resized.
Ensure that the area has an ID (on this page we will call it blocklyArea
).
Here is a live demo of a table cell that fills the bottom of the screen.
Injection
Injecting Blockly is the same as the process described in
injecting fixed-sized Blockly.
Add the scripts, the blocklyDiv
element, a toolbox, and an injection script.
Blockly should now be running on the page, just not located where it should be (probably offscreen).
Positioning
The final step is to position the blocklyDiv
element over the blocklyArea
element. To do this, remove any height
and width
styles from blocklyDiv
and add absolute positioning:
<div id="blocklyDiv" style="position: absolute"></div>
Then replace the injection script with one that also positions 'blocklyDiv' over 'blocklyArea':
<script> var blocklyArea = document.getElementById('blocklyArea'); var blocklyDiv = document.getElementById('blocklyDiv'); var workspace = Blockly.inject(blocklyDiv, {toolbox: document.getElementById('toolbox')}); var onresize = function(e) { // Compute the absolute coordinates and dimensions of blocklyArea. var element = blocklyArea; var x = 0; var y = 0; do { x += element.offsetLeft; y += element.offsetTop; element = element.offsetParent; } while (element); // Position blocklyDiv over blocklyArea. blocklyDiv.style.left = x + 'px'; blocklyDiv.style.top = y + 'px'; blocklyDiv.style.width = blocklyArea.offsetWidth + 'px'; blocklyDiv.style.height = blocklyArea.offsetHeight + 'px'; Blockly.svgResize(workspace); }; window.addEventListener('resize', onresize, false); onresize(); Blockly.svgResize(workspace); </script>
Here is a live demo of Blockly that fills the bottom of the screen.