Saturday, March 29, 2014

Positioning and sizing object in Design Studio

Design Studio will re-position and re-size the objects you put on your dashboard to fit the browser window or mobile device screen. How this is done can be configured using 6 parameters; 4 margins (top, bottom, left and right), width and height. At least 2 of these 6 parameters must be set to "auto".

The 4 margins behave as anchors, if defined they set/fix the distance between the object and canvas or container border.

When you select an object you will see which of the 4 margins are anchored. There will be a line with an arrow and the distance between the object border and the container border in pixels.


A margin set to auto is represented by a empty circle.


If height or width are fixed you will see a vertical or horizontal line with the pixel size.

The total looks like this:

All the margin sizes and the height and width sizes are clickable. Even the empty circles (when a margin is set to auto) is clickable.

When a fixed margin size is clicked it switches to auto and when a auto margin is clicked it switches to a fixed margin.

Here an example where there is a text box in a container and the text box is anchored to the bottom right of the container. The text box itself is 100 pixels high and 125 pixels wide. It is positioned at 20 pixels from the bottom and right side of the container. 

The container itself has 4 fixed margins and auto width and height.

When the browser window is made bigger both objects are re-sized or re-positioned. The yellow panel has 4 fixes margins, which means it will be bigger. The red text object has a fixed size, but its position is anchored 20 pixels from the right and bottom side.

When the window is made smaller the yellow panel will start to disappear, but the red text object keeps the same size, anchored to the bottom right.