Would anybody interested in a component to float containers?

I am cross-posting this here to get more eyes on it:

Hi guys,

A couple months back I wanted to place links in a column container and have them stay in the same place (and stay in the container) when you scroll down the page. The effect can be seen here: https://bouzidanas-st-streamlit-code-editordocs0-getting-started-zaowoo.streamlit.app/

If you scroll down any of the pages, the links on the right stay in place. Not only that, the links will stay within their container so if you had some footer content after the column containers, the links will not end up covering or on top of it when you scroll all the way down.

In the example, I shared, I did this purely with markup in an st.markdown with unsafe_allow_html=True.

For another little project, I wanted to just float a container with vertically stacked Streamlit elements/widgets/components like st.title and st.radio.

I found a solution that works like a charm (in browsers that support css :has() psuedo-class so not firefox) and its very simple to implement and use. To implement you need:

html_style = '''
div:has( >.element-container div.floating) {
    display: flex;
    flex-direction: column;
    position: fixed;

div.floating {
st.markdown(html_style, unsafe_allow_html=True)

and then to float a container, just add the following to the container (make sure its inside):

st.markdown('<div class="floating"></div>', unsafe_allow_html=True)

Note: Because containers add gaps between st elements, an additional gap will be added when you add the above div. To sortof get around this, you can place the div after or before the content depending on what you prefer appearance-wise.

This is simple enough of a solution that I am not sure it needs to be turned into a component. Would anyone be interested in a component that adds the css and makes adding the div as simple as calling a function like float() ?


Also, I am not sure “floating” is what this effect is called…


@bouzidanas Thanks for creating and sharing this, it’s definitely helpful for creating an in-app quiz or for use as a page table of content.

Best regards,

1 Like

Very interested, like a blonde beauty

Finally got around to doing it! Thanks for the feedback and interest!

Check out the project here:


GitHub - bouzidanas/streamlit-float: A simple module for fixing the vertical…

A simple module for fixing the vertical position of Streamlit containers relative to viewport instead of page or content - GitHub - bouzidanas/streamlit-float: A simple module for fixing the vertic…

One thing I would like to improve is remove the need for initialization so if anyone has an idea on how to accomplish that let me know or make a pull request.

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.