Welcome, Guest Login

Support Center

Size and Position

Last Updated: Mar 14, 2016 05:12PM EDT

Position Blocks on a Canvas Layout.

If you don't know how to access the 'Size & Position' on a Canvas review this section.

Size & Position: Adaptive Coordinate

EachScape Size & Position lets you easily switch between different ways to position your Blocks across multiple screens.
In this Tutorial we review  of example of Block with a fixed size and Block which size is relative to the edges of the screen or containers.

Example 1: A Block of a fixed size at a specific distance from the top left corner 


In this example, we positioned our image at a certain distance from the LEFT and the TOP of the border of our Canvas Layout (in this example the Canvas covers our entire view, as a result we position our image 50 pixels from the LEFT of the View and 40 from the Top of our View. (Positions always refer to the edge of the Layout containing the Block)

We then fix our image size to 250 Width by 300 Height.

What that means is that no matter what the View size the image size will not change while the image position we remain at 50 from the LEFT and 40 from TOP of our Canvas.

The puppy image is Positioned: 
  • 50 Pixels from the LEFT of the screen
  • 40 Pixel from the TOP of the screen
We gave a FIXED Width and Height to our Image.
That mean the image size WILL NOT change when the screen size changes.
To do that we used Width and Height
  • Width: 250 Pixels
  • Height: 300 Pixels

Rendering on an iPhone

Rendering on an iPad Mini
As you can see the image always keeps the same size size.
It's always positioned 50 from the LEFT, 40 from the Top.

Example 2: A Block which size changes based on the container. 

In this example, we use a full fledge Edge Constraint.  Instead of having a fixed size for the Block we let the Block change size by setting the size based on the distance from the side of the layout containing the Block.

We positioned the Block:
  • 50 pixels from the LEFT 
  • 50 pixels from the RIGHT
  • 40 pixels from the TOP
  • 300 pixels from the BOTTOM
If the Layout changes, the image size will change.

Here is what it will look like on an iPad Mini:

You see that the contraints haven't changed, the image size has changed.
This is great when you need the image to adapt to the size of the screen (or Layout)
Great for: Modular Designs
Component will be extended or compressed based on the distance from the side of the Canvas Layout

Edge Contraint

A constraint on a given edge, if specified, anchors the edge of the child to the corresponding edge of the container. 
  • If a constraint is not specified, that edge is considered freely adjustable depending on the content.  
  • ‚ÄčIf all values are zero, the Component will fill the Canvas (container) completely. 
  • If only one constraint is filled, then it will constraint only in one direction.
Center Blocks
  • If you leave both left and right blank - or click 'center horizontally ', the Block will be centered horizontally.
  • If you leave both top and bottom blank or click the 'center vertically', the Block will be centered vertically.

Positive or Negative Constraints

  • A positive value for a constraint is an "inset" from the container, meaning it indicates an amount of margin between the edge of the child and container respectively.  
  • If a value is negative, the child edge will be outside the container edge by that amount.  (This may be of limited use in some circumstances.

Device Height & Width

You can do use the Device Height and Width to calculate specific position on a Canvas.
You can add, substract, multiply or divide.

Device Heigh and Width are directly accessible through these buttons in Size & Position:
You will find more system variable in System Value 
You will find the operators (add, divide, ..) and much more in  Formatters 
The constraint values can be expressions.
This means that they can get the placement constraints from a data source, or potentially use different values depending on the orientation.

Example of system values



While the block implements constraints between the container and the children, the are no constraints BETWEEN the children.  Thus, they will overlap if their placement dictates. (This is a feature.)  The block are laid out in ascending order, back to front.  This means that if the size and placement of Block #2 would overlap with Block #1, Block #2 would be placed on top of Block #1. You can modify Block Order using Block Layout Order.


Learn More:

- Using System like device portrait hight for Adaptive UI
- Create Scrolling Patterns
- Formatters
Using The Canvas Layout

Help us improve! Rate this article:

Yes I found this article helpful

Ask a Question   

seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found