Saturday, April 5, 2014

Anchoring objects in Design Studio

In an earlier blog I explained about positioning objects using anchors. In this blog I will give a example how this can be used.

I created an empty dashboard using the standard template: Desktop Template 1. When I execute this dashboard (locally) you can see the filter menu on the left side. Now when I make the browser smaller objects start to drop of on the bottom.

This is because all objects are in 1 cell and anchored on the top margin.

I need to add a grid, with multiple cells. Then I will have multiple anchor points as each cell (of the grid) border can act as an anchor point. This way objects can be anchored to different anchor points.

After adding the new grid layout into the grid cell that holds all the filter objects. I change the grid layout to fill the complete cell by setting all the border margins to 0 (and height and width to auto). Then I change the numbers of rows to 8. Each grid cell border can function as an anchor. As you can see below, there are more anchor points now. All the arrows are anchor points, the green arrows represent 2 anchor points. The bottom and top the different cells.

Now I move all filter objects into cells of the newly created grid. I must move all the objects I want to stick together in the same cell.

The moved objects still have the original (fixed) anchors to the top margin, which is now the top margin of the cell I just moved them into. This needs to be adjusted. Adjust each margin until the objects are positioned correct.

Make sure all objects you want to stick together are anchored to the same cell border. If you take a closer look at the previous screen prints you can see that the header text and the dropdownbox are anchored to the same cell border. This way it looks like they are glued together. The same goes for the radio button and header.

Now when I execute this dashboard and start re-sizing the browser you will the effect of this new structure. The newly added grid is on the left side and the original on the right. This way you can clearly see the before and after situation.

Some other examples:

Keeping the radio button in the middle.

No comments:

Post a Comment