# How do you stop custom button images from auto-nesting in Adalo?

Build each visual state in its own rectangle, use opposing visibility rules, and align the finished controls without triggering Adalo’s automatic nesting.

- Canonical URL: https://adalocado.com/answers/stop-custom-button-images-auto-nesting
- Verification: Documented from current sources
- Topic: Responsive Design
- Skill level: Intermediate
- Last reviewed: 2026-08-14
- Index status: index-now

## Short answer

Place the two button-state images in separate rectangles and give the rectangles opposing visibility conditions. Build them away from the final overlap, then move them into the same position with arrow keys instead of dragging one fully inside the other; this avoids accidental auto-nesting while preserving the custom artwork.

Build each visual state as a complete control before overlapping them. Because rectangles can auto-group anything dropped fully within their borders, use the component tree to keep the state containers separate and keyboard movement to align them without changing their hierarchy.

## Intended outcome

A custom image button shows the correct reacted or unreacted artwork while its controls remain intentional siblings instead of becoming nested inside one another.

## Requirements

- Separate image assets for the reacted and unreacted states
- A Boolean or relationship condition that identifies the active state
- Access to the screen’s component tree

## Step by step

1. **Create two state containers**

   Add one rectangle for the unreacted state and another for the reacted state. Put only the matching image inside each rectangle.

2. **Set opposing visibility rules**

   Show the unreacted rectangle when the state is false or absent, and show the reacted rectangle when the same state is true or present.

3. **Wire both tap actions**

   Give each visible rectangle the appropriate action: one sets or adds the reacted state, and the other clears or removes it.

4. **Assemble away from the overlap**

   Prepare the two rectangles in separate areas of the canvas so dragging an image or rectangle does not drop it fully inside another container.

5. **Align with keyboard movement**

   Select each finished rectangle and use arrow keys, with Shift plus an arrow for larger moves where supported, until both occupy the same coordinates. Verify their sibling order in the component tree.

## Why it works

- Adalo treats rectangles and images as containers when another component is dropped fully inside their borders, so drag-and-drop placement can silently change the parent-child tree.
- Two sibling state containers keep each image, visibility rule, and tap action independent while still allowing both controls to occupy the same visual location.

## Data model

| Collection | Properties | Relationships |
| --- | --- | --- |
| The record that owns the button state | A Reacted Boolean or equivalent state property | Optional relationship to the user who reacted when reactions are user-specific |

## Common failures

### One image disappears inside another component

Inspect the component tree, select the incorrectly nested child, and drag it out of the Auto-Group before repositioning the completed container with keyboard movement.

### Both state images appear at once

Check that both rectangles use the same state source with exact opposite visibility conditions and that each tap action updates that source.

## Testing checklist

- [ ] Start with the state false, confirm only the unreacted artwork appears, tap it, and confirm only the reacted artwork replaces it at the same position.
- [ ] Toggle the control repeatedly in Preview and inspect the component tree to confirm neither rectangle or image becomes nested inside the other.
- [ ] Each image belongs to only its intended rectangle
- [ ] The two rectangles are siblings in the component tree
- [ ] Visibility conditions are exact opposites
- [ ] Both tap actions update the same state
- [ ] Repeated toggles keep the images aligned

## Limitations

- Keyboard positioning is a community workaround confirmed in the source thread; exact shortcuts and component-tree behavior can vary between builder versions.
- Current Adalo documentation confirms rectangle Auto-Groups and how to remove nested components, but Adalocado has not reproduced this exact custom-button stack in a current project.

## Community evidence

### [Issues with stacked images nesting inside each other](https://forum.adalo.com/t/issues-with-stacked-images-nesting-inside-each-other/66425/11)

The maker confirmed that separate rectangles plus keyboard positioning prevented unwanted nesting and allowed a working custom-art button. Boundary: The thread reports a builder workaround rather than a dedicated lock-layer or disable-nesting feature.

## Sources

- [Adalo forum accepted solution](https://forum.adalo.com/t/issues-with-stacked-images-nesting-inside-each-other/66425/11)
- [Adalo Help: Grouping Components](https://help.adalo.com/design/designing-your-app/grouping-components)

Markdown version: https://adalocado.com/answers/stop-custom-button-images-auto-nesting.md