Skip to main content

Dashboards - Layering Containers

Updated

The order in which you add containers to a dashboard determines their layer order (z-index). 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.

    Tags:
  • Creator

 

In this article

  1. Understanding z-index Controls

 

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.

H3_Arrange z-index.png

 

The options in the Arrange section of the 
General Settings panel allow you to control
the z-index.

 

 

 

 

 

 

 

 

 

To increase or decrease the z-index, you can use the following options:

Arrange To arrange containers, adjust their z-index.
Send to front Increases the z-index to the maximum number (z-index = element numbers + 1)
Bring forward Increases the z-index (1 per click)
Send backward Decreases the z-index (1 per click)
Send to back Decreases the z-index to the minimum number (z-index = 0)

 

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 to give it the lowest z-index.

  • Use Send to Front to move a container to the top layer
  • Use Send to Back to move a container to the bottom layer

 

H3_ContainerLayers_SentToBack_multilayers.gif
  • Select the image container and click Send to Back
  • For multi-layer backgrounds, send the top container back first
  • Then send each layer back, with the bottom last
  • Now the image sits behind, with the gradient above the navigation bar

 

Bring Forward/Send Backward

Layering containers lets you create custom buttons, labels, and interactive elements. For example, you might use:

  • A background box or shape
  • An icon or text label
  • A selector container that applies a filter when clicked
  • A chart zoom into another chart

Keep interactive containers above decorative ones to ensure controls remain accessible. For example, place a selector container over a background box and label for a custom filter button.

  • Use Bring Forward to move interactive containers forward 
  • Use Send Backward to move background elements behind them.

Each time you select Bring Forward or Send Backward, the container's z-index changes by one level.

 

H3_ContainerLayering_BringForward_SendBackward.gif
  • Interactive elements hidden behind containers are not accessible
  • Use Bring Forward to place the selector container on top before hiding it
  • Use Send Backward to adjust layering of the zoom-in chart

 

Troubleshooting: Container Layering and Z-Index 

If Send to Front or Bring Forward does not move a container to the top layer, the page may contain containers with a z-index greater than 99. Containers with a z-index above 99 remain on top of other containers. As a result, you may experience the following issues:
  • Containers appear above objects that are configured to be on the top layer
  • New containers cannot be brought to the front
  • Icons or buttons cannot be clicked
  • Charts are partially covered by another container
  • Zoomed charts appear behind containers
To fix this, select the container currently on top and click Send Backwards enough time to lower its z-index. Repeat until it no longer covers the object, then use Bring Forward or Send to Front on the required container.
 
You can also use Send to back on the container causing the issue, although this can hide it behind other containers, then use Bring forward or Send to front on the required container.
 

Where to from here?

Learn more about Harmoni:

Up Arrow.png

Related articles