'Send to front' and 'Send to back'

Wondering why we haven’t posted in a while?

Our blog has moved to a different location.
Visit http://blog.basecase.net to check out our latest blog posts.

We’ve added a new feature that lets you choose the order in which controls will appear, when a group of two or more are overlapping.

Users of presentation software like Microsoft PowerPoint will likely be familiar with this functionality, often called ‘stack ordering’ or ‘layer ordering’. You set the correct order by selecting ‘send to front’ or ‘send to back’ for each object in the stack.

This gives you more control over the design of your app, enabling you to build more multi-dimensional pages.

To adjust the stack position of a control, select it and click the cog icon in the top-right corner of the properties panel.

Best practices for stack ordering

It’s important to be aware that different devices and operating systems render your apps differently. You should therefore avoid overlapping objects in a way that requires them to line up with each other in a precise way.

For example, you may wish to label parts of a column chart by adding a label or text area on top of the chart. While the outline of the chart will always appear in precisely the same place on the page, the elements within the chart can be rendered differently, leading to unexpected results.

Example 1: A chart rendered in one browser [1] with labels stacked on top [2] might render differently when the app is loaded in a different browser [3] creating a misalignment [4]

(In this case, we advise using the built-in labels in the column chart to ensure that the labels always match up with the position of the columns.)

Stack ordering opens up the possibility of more creative designs. To ensure your pages will appear correctly, bear in mind these simple points:

  • You can use stack ordering to guarantee the order in which overlapping elements will appear on the page.
  • The size and position of the controls are always fixed on the page, but the internal elements of the controls may render slightly differently on different devices (e.g.: don’t depend on a precise position of internal bar segments in a bar chart - you can only rely on the position and size of the control as a whole when laying out your content).

Wondering why we haven’t posted in a while?

Our blog has moved to a different location.
Visit http://blog.basecase.net to check out our latest blog posts.