Scrawl.js - demonstration 214

Setting element width and height as a percentage of the stack's dimensions

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.

Main (dark blue) stack

Scale (n) 0.5 1.5

Main (light blue) paragraph

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

Scenario: ???

Actions:

  1. ???

Known browser issues: ???

Result images:

image of expected test result