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.
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.
The 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
- 01
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.
- 02
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.
- 03
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.
- 04
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.
- 05
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.
The underlying logic
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 | Important 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 |
What still needs checking?
- This is a forum-native answer with no original Adalocado video; current documentation confirms that rectangles act as Auto-Group containers when components are dropped fully inside them.
Common failure modes
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
0 of 7 checked on this device
Current 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.
Current evidence screenshots have not yet been added. Treat the guidance as documented or legacy material according to the status shown above.
What the Adalo community is reporting
These are concise editorial summaries of public forum posts—not endorsements or independently reproduced results.
Issues with stacked images nesting inside each other
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.
obrienpaule (question and accepted confirmation), with Ali-Bazzi and Victor · May 2026Sources and status
This page was last reviewed on Aug 14, 2026. Its current status is Documented from current sources.
Verification owner: Automatically organized from an accepted forum answer; monitored for corrections. Next review: Oct 14, 2026.
Changelog
Automatically posted from a solved Adalo forum topic; corrections are monitored on the live site.
Report this answer.
Forum answers post automatically. If a step is wrong, outdated, unclear, or missing an important boundary, send the exact correction and the editor will check the live page.
Report a problemDid this solve your problem?
Never deal with an Adalo problem again.
Rehost becomes the monthly team behind your app. Fixes, releases, integrations, and ongoing changes have an owner.
See monthly managementBring us the messy version.
Describe what you expected, what happened instead, and what you already tried.
Ask Adalocado
