# How do you keep a chat input fixed to the bottom in responsive Adalo?

Enable Sticky while scrolling on the chat composer, verify its parent hierarchy, and test the pinned layout at every supported screen size.

- Canonical URL: https://adalocado.com/answers/keep-chat-input-fixed-bottom-responsive-adalo
- Verification: Documented from current sources
- Topic: Responsive Design
- Skill level: Beginner
- Last reviewed: 2026-08-26
- Index status: index-now

## Short answer

Select the text input or the group containing the whole chat composer, place it at the bottom of the screen, open Layout, and enable Sticky while scrolling.

Place the complete chat composer at the bottom, apply Sticky while scrolling to its intentional parent group, and verify the result with enough messages to scroll at every supported breakpoint.

## Intended outcome

The chat composer stays in its chosen bottom position while the messages or other page content scroll behind it.

## Requirements

- A responsive Adalo app with access to the Layout tab
- A text input and send control placed together as one chat composer
- Enough page content to make the screen scroll during testing

## Step by step

1. **Group the chat composer**

   Place the text input, send button, and their background inside one intentional group or rectangle so the controls move together. Confirm their parent and child order in the component tree.

2. **Place the group at the bottom**

   Move the completed composer to its intended bottom position at the mobile breakpoint before enabling sticky behavior.

3. **Enable Sticky while scrolling**

   Select the composer group, open the Layout tab, and turn on Sticky while scrolling. Adalo keeps the selected component or group in the same screen position as the page scrolls.

4. **Check every supported breakpoint**

   Open the mobile, tablet, and desktop layouts you support. Adjust shared or custom positioning only where the composer needs a different width or bottom location.

5. **Test with real scrolling content**

   Preview the screen with enough messages to scroll, then focus the input, scroll the message area, and send a test message while watching the composer position.

## Why it works

- Sticky while scrolling pins the selected component or group to its current on-screen position while other screen content scrolls.
- Grouping the input, button, and background makes the entire composer follow one sticky setting instead of allowing its controls to move independently.

## Common failures

### The input still scrolls with the messages

Confirm Sticky while scrolling is enabled on the composer group itself, not only on a child input, and inspect the component tree for an unintended parent container.

### The input is sticky but covers the last message

Add enough bottom space to the scrolling content for the full composer height, then test the final message at each supported breakpoint.

### Only part of the composer stays fixed

Put the input, send button, and background in the same intentional group and apply the sticky setting to that group.

## Testing checklist

- [ ] Load a conversation long enough to scroll, move to the middle and bottom, and confirm the composer remains in the same bottom position.
- [ ] Test mobile, tablet, and desktop widths, then focus the input and send a message without the composer moving or hiding the newest message.
- [ ] The whole composer has one intentional parent group
- [ ] Sticky while scrolling is enabled on that group
- [ ] The final message remains visible above the composer
- [ ] The layout works at every supported breakpoint
- [ ] Typing and sending still work after scrolling

## Limitations

- The Layout tab and Sticky while scrolling control apply to responsive builder apps, not Legacy Builder screens.
- A sticky composer can overlap scrolling content unless the screen reserves enough bottom space for its height.
- The forum source confirms the setting but does not include a follow-up reproduction from the original author.

## Community evidence

### [Responsive mode: Text box won’t stay fixed to the bottom](https://forum.adalo.com/t/responsive-mode-text-box-won-t-stay-fixed-to-the-bottom/63294/2)

The accepted reply directs responsive-app builders to enable Sticky while scrolling and keep related controls under an intentional container in the component tree. Boundary: The topic closed without a later confirmation or correction from the original author.

## Sources

- [Adalo forum accepted solution](https://forum.adalo.com/t/responsive-mode-text-box-won-t-stay-fixed-to-the-bottom/63294/2)

Markdown version: https://adalocado.com/answers/keep-chat-input-fixed-bottom-responsive-adalo.md