Scrollable vs. Non-scrollable

Question about scrolling:

Could anyone briefly explain how to freeze the top search bar and allow everything below it to scroll freely…? I can’t figure it out for the life of me (new user here).

Thank you in advance :folded_hands:

The trick is to use a Floating Group as your app bar instead of the native app bar.

If your page/view type is ‘Vertical List’:

  • In the view’s properties, uncheck ‘Show top app bar’ and ‘Show safe area’.
  • Add a Floating Group to the view – this will act as your app bar, containing the search input.
  • In the Floating Group – align it to the top, center, and in the layout, remove any width constraints.
  • In the Floating Group – create your search input, add a top padding to act as the ‘safe area’. Maybe 60px. Style everything else to your liking.
  • In the vertical list in the body, add your data source.

That should do it.

I had success following this same advice. I will say for mine a still used the top app bar, but margined the floating group below it.

The one problem with removing the fixed width constraints is it will tend to look odd on widescreen layouts (iPad) I think.

@Camron - I can’t thank you enough for the clear explanation and solution!!! :folded_hands:

You’re most welcome!