# How do you prevent large text from breaking Adalo list layouts?

Nest list-item content inside one parent container, remove overlapping groups, and test the row with the device’s largest accessible text setting.

- Canonical URL: https://adalocado.com/answers/prevent-large-text-breaking-list-layouts
- Verification: Documented from current sources
- Topic: Lists, Filters, and Search
- Skill level: Beginner
- Last reviewed: 2026-08-14
- Index status: index-now

## Short answer

Make the list item’s rectangle the parent container, nest every label, icon, and subgroup inside it, and remove overlaps between sibling groups. Keep fixed-position groups intentional and test with the device’s largest text setting; Masonry cannot compensate for an element tree whose groups already overlap.

Treat accessibility text growth as a containment problem. A clean parent-child tree gives the row space to expand; overlapping groups hide that structure and make the final layout unpredictable.

## Intended outcome

List rows keep their hierarchy and remain usable when device accessibility settings enlarge dynamic text.

## Requirements

- A custom list item with a clear parent container
- Access to the element tree and Layout settings
- A device or simulator with enlarged text enabled

## Step by step

1. **Choose one parent container**

   Use the row rectangle or group as the parent for everything that belongs to the repeated list item.

2. **Nest each content group**

   Place the left-side identity content and right-side labels or icons into separate child groups inside the parent.

3. **Remove sibling overlaps**

   Inspect the element tree and canvas together. Resize or reposition groups so their bounds do not overlap before relying on responsive behavior.

4. **Use fixed positioning sparingly**

   Apply Stay Fixed only to a group that must remain anchored and has enough reserved space when adjacent text grows.

5. **Test the largest text size**

   Increase the device text setting, preview representative short and long values, and confirm every row remains readable and tappable.

## Why it works

- Responsive layout works from the parent-child element tree. Overlapping siblings create ambiguous space that a masonry list cannot reliably expand around.
- Accessible text growth needs reserved space and containment, not only a larger row height.

## Common failures

### Text overlaps the icon group

Separate the two areas into sibling groups, remove overlapping bounds, and reserve horizontal space for the fixed group.

### The list row still clips

Confirm every growing text element is nested inside the row’s parent and that the parent is allowed to grow rather than remaining fixed-height.

## Testing checklist

- [ ] Preview a row with the shortest and longest real text while the device uses its largest text setting.
- [ ] Test consecutive rows and confirm one expanded item does not overlap the next item.
- [ ] Every row element is nested inside one parent
- [ ] Sibling groups do not overlap
- [ ] Short and long content both fit
- [ ] The largest device text size remains readable
- [ ] Tap targets do not collide

## Limitations

- Current Adalo documentation corroborates parent-child containers and automatic text-growth behavior, but Adalocado has not reproduced this exact forum layout across every list type and platform.
- Exact large-text behavior can differ between responsive web apps and native builds, so both target platforms need testing.

## Community evidence

### [Dynamic text size in list items](https://forum.adalo.com/t/dynamic-text-size-in-list-items/65566/4)

The accepted answer recommends a nested parent-container structure, separate child groups, no overlapping elements, and deliberate fixed positioning. Boundary: The reply does not document results across all Adalo list types or native platforms.

## Sources

- [Adalo forum accepted solution](https://forum.adalo.com/t/dynamic-text-size-in-list-items/65566/4)
- [Adalo Help: Definitions and Terms](https://help.adalo.com/design/designing-your-app/definitions-and-terms)
- [Adalo Help: Grouping Components](https://help.adalo.com/design/designing-your-app/grouping-components)

Markdown version: https://adalocado.com/answers/prevent-large-text-breaking-list-layouts.md