Resizable Workspace

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';
  };
  window.addEventListener('resize', onresize, false);
  onresize();
  Blockly.svgResize(workspace);
</script>

Here is a live demo of Blockly that fills the bottom of the screen.