Scrawl.js - demonstration 215

Locking elements horizontally and vertically

Extensions: stacks

Setting the element's height attribute to 0 or '0%' triggers height:auto.

Note: For best results, set the margin, padding and borders of stack elements (including pads and stacks) to 0; borders can be recreated with scrawl entities, if required. Otherwise the current implementation of this functionality leads to display discrepancies between IE and other browsers

Lorem ipsum dolor sit amet.

Consectetur adipiscing elit. Integeras nec odio.

Scale (n) 0.5 1.5
Width (%) 0 120 (px) 0 600 Height (%) 0 120 (px) 0 600
Starts ('n%') X: -50% 150% Y: -50% 150% Handles ('n%') X: -50% 150% Y: -50% 150%
Starts (n) X: -20 620 Y: -20 620 Handles (n) X: -100 100 Y: -100 100
Starts ('str') X: Y: Handles ('str') X: Y:
Border width 0 50 Border style
Padding 0 50 Box sizing
Red element - lock to Green element - lock to
Equal height Equal width

Scenario: ???

Actions:

  1. ???

Known browser issues: ???

Result images:

image of expected test result