The order you add containers to your dashboard controls the order of the layering. Sometimes, you may find a container overlaps another and you need to change the ordering. Understanding how the Arrange options in general settings work helps you to ensure users see what they need to see.
In this article
Understanding z-index controls
The z-index controls the position of the elements/containers on the page. It is added with each container you add to the dashboard. The higher the z-index, the closer the element is to the surface. The lower the z-index, the further back the element is.
To increase or decrease the z-index, you can use the following options:
Send to Front/Back
In the example below, a background image has been added to the dashboard last and it sits on top with the highest z-index. To move the image right to the back of all the containers, we'll use Send to back which gives it the lowest z-index.
- Use Sent to Front to being the container to the top
Bring Forward/Send Backward
It's possible to place a layer directly under the heading to make it stand out. In the example below, when first adding the container, it sits directly on top of the heading and image. We can use Send backwards, clicking twice, to move the container firstly under the image container, and then under the text container. The layer has had its z-index lowered by 2 points.
Zoomed Charts
If you have 100 or more containers on your dashboard and you are using charts that zoom in, you may find that other containers show over the top of a zoomed-in chart. Harmoni automatically sets the z-index for a zoom-in chart to 99 so any chart with a z-index higher than this will sit on top of the zoomed chart.
To move any overlapping containers backwards, click Send backwards enough times to change the z-index from over 99 to under 99. This will enable your zoomed-in chart with a z-index of 99 to sit on top.
Where to from here?
Learn more about Harmoni: