Fixed containers in table?

Hi i have this app for a client

basically they want to know if its possible to have that Blue container fixed like the menu? so while i scroll the table (right now i put table as fixed so you guys can see picture, but should be auto height) so when they scroll the blue part stays fixed in windows so they dont need to scroll down to see it when the table is big, as it will show 150 initials results per requirement.

any idea or alternative? @PeteTheHeat @Tess @victoria

thank you

1 Like

Hi @agaitan026!

The desired UI is possible, but there are a few steps to get it setup properly. The key to achieving this pattern is the "Expand content to fit" property which is currently supported on the Main frame and Containers.

This property is only supported when the Frame or Container has a single child, but it will make that child take up all of the available space in the container. Though Retool doesn't yet support a Footer frame, you can leverage a Container's Footer add-on to achieve the same UI.

  1. Enable "Expand content to fit" on the Main frame.

CleanShot 2023-11-08 at 11.06.22@2x

  1. Add a Container to the Main frame, remove its header, add a footer, and enable "Expand content to fit.

  1. Add a "Footer background" style override to the container to make the background blue.

CleanShot 2023-11-08 at 11.09.20@2x

  1. Add components to the Container's footer!

If helpful, I've also attached an export of this example application:

nested container full bleed.json (70.6 KB)

Please let me know if you have any followup questions, and happy building!

Alexi

1 Like

awesome works good