# How do you stop Adalo components from disappearing or auto-nesting?

Inspect the component tree for an unintended parent, remove the nested component, and align overlapping controls without dragging them into another container.

- 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-26
- Index status: index-now

## Short answer

Open the component tree and remove the missing component from any unintended list, rectangle, image, or group. For overlapping state controls, build each state separately and use keyboard movement for final alignment so dragging does not auto-nest one control inside another.

Start with the component tree whenever a control disappears after placement. Remove accidental parent relationships, keep intended containers explicit, and use keyboard positioning for overlapping controls that should stay siblings.

## Intended outcome

Components remain visible and selectable because their parent-child hierarchy matches the intended screen layout instead of an invisible or overlapping container.

## 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. **Inspect the component tree**

   Expand the screen hierarchy and locate the missing component. Check whether it became a child of a list, rectangle, image, ellipse, or group that covers the drop area.

2. **Remove the unintended parent**

   Move the component out of the wrong parent in the component tree. If the parent is an obsolete invisible list or container, remove it only after confirming that no required content depends on it.

3. **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.

4. **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.

5. **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.

6. **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.

7. **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 lists, groups, rectangles, images, and ellipses can act as parents, so a component dropped into their bounds can change hierarchy instead of remaining a screen-level sibling.
- 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

### A newly dropped button disappears from the canvas

Expand the component tree and inspect the parent that covers the drop area. Move the button out of that parent, or remove an obsolete invisible list after confirming it is unused.

### 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

- [ ] Drop a temporary test button in the formerly affected area and confirm it remains visible as the intended screen-level or container-level child.
- [ ] 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.
- [ ] Every missing component is accounted for in the component tree
- [ ] 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.
- The supporting disappearing-button topic was resolved by its author in a later unmarked post. The accepted marker points to an earlier exploratory reply, and Adalocado has not reproduced that exact invisible-list setup.

## 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.

### [Buttons Disappearing](https://forum.adalo.com/t/buttons-disappearing/63299/7)

The author found an invisible list covering the affected area. Deleting the unused list stopped newly placed buttons from disappearing. Boundary: The concrete fix appears in a later author post rather than the accepted reply and may not explain every disappearing-component symptom.

## 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)
- [Supporting Adalo forum resolution](https://forum.adalo.com/t/buttons-disappearing/63299/7)

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