Floating containers

HI, i need a container to float as the user scrolls, I cannot find anywhere to edit css for the container. Can anyone help? If this feature is not available for floating elements as the user scrolls can Retool add this?

Hey @danny!

Currently, there isn't support for making components sticky aside from the header and sidebar. The ability to do so has been requested before, however. Would you mind describing a bit more about how you'd be using sticky containers in your UI?

It would help add some context, and maybe there's a workaround for your particular case!

Forgot i posted this, i fixed this with css scripting. The container now floats as people scroll they can see the information.

1 Like

Hey @danny, do you mind sharing how you did this?

Thanks!

Hey @Kabirdas,

Any news on this? I'm also in the need of a floating container. I have two use cases for this

  1. Have a floating "Add" button for my app
  2. Have a floating header and/or footer

Thank you!

Patrick

+1

1 Like

Hey @PatrickMast and @AnsonHwang! The dev team is looking at adding more support for footer behavior in apps. No updates on sticky components specifically.

I don't know how you solved this @danny but I'm curious to see it as well!

Components typically have a parent element that exists in a fixed position on the page but that parent element doesn't have a unique identifier. Since absolute or sticky styling is relative to the parent element that makes it tricky to make individual components sticky. For instance, using something like the following to will make all containers on a page sticky, which might not be what you'd want :sweat_smile:

._retool-ContainerWidget2 {
    position: sticky;
    top: 0vh;
}

If someone has a better workaround that'd be great!

Thank you for the update @Kabirdas, I'd rather wait for a native solution than to use CSS.

:grinning:

Patrick

+1 on being curious for @danny 's solution.

@danny - mind sharing that CSS trick you used?