Ugly screen shifting when rendering: how to avoid this?

Streamlit seems to create a very visible, and ugly screen shitfing when rendering a page. The main portion of the screen starts say halfway down the top, and when things have rendered, the entire page moves up.

I’ve recorded a video to highlight the problem.You can view it here: https://drive.google.com/file/d/1zjYrOZjEYkAMh22OFY5AndHhgNETHo06/view?usp=sharing

Any ideas on how to avoid this?

I’ve a sidebar which stays still. I use wide page, and removing that didn’t fix the issue. I use containers and columns. I’ve tried to removing containers, but it doesn’t help. I didn’t try removing the columns as I do want the horizontal layout provided by columns.

Thanks much for any guidance,

Dinesh

Getting rid of container fixed the issue.

I hope this issue is fixed when containers moves out of beta, assuming I’m not doing anything wrong.

Dinesh

Hello @ddutt,

Unfortunately, I got access denied on your video, could you share a more public link :slight_smile: ?

Thanks,
Fanilo

Oops, sorry, thought I had selected the write permissions. Here you go @andfanilo :

Dinesh

Any help with this issue?

Thanks,

DInesh

Hey @ddutt

I am unable to reproduce this issue on my end, can you share a minimal code for reproducing this issue ?

Hi Ashish,
Thanks for the prompt response. Here is the minimal code:

st.set_page_config(layout="wide", page_title="Suzieq")  

do_refresh = st.sidebar.button('Refresh')

container_1 = st.beta_container()
container_2 = st.bea_container()
col1, mid, col2 = st.beta_columns([2, 1, 2])
col3, mid, col4 = st.beta_columns([2, 1, 2])

# Get each of the summarize info
dev_df = gui_get_df(state_container.sqobjs['device'], columns=['*'])
if not dev_df.empty:
    dev_status = dev_df.groupby(by=['namespace', 'status'])['hostname'] \
                       .count() \
                       .reset_index() \
                       .rename({'hostname': 'count'}, axis=1)

    dev_chart = alt.Chart(dev_status, title='Devices') \
                   .mark_bar(tooltip=True) \
                   .encode(y='status', x='count:Q', row='namespace',
                           color=alt.Color(
                               'status',
                               scale=alt.Scale(domain=['alive', 'dead'],
                                               range=['green', 'red']))
                           )

 with container_1:
    with col1:
       st.altair_chart(dev_chart)

I have similar calls for filling out the remaining three columns. Is this good enough? I see the problem on both Firefox and Chrome browsers on Linux. I don’t have other platforms to try :slight_smile:

Is that sufficient data?

Dinesh

Hi @ddutt,

I can still not reproduce this issue on my end with this piece of code. Are you using the style hack for horizontal layout of radio buttons ? I see that in the video you shared the radio buttons mess up the layout as they try to flex column wise then the style overrides it to row.
Its pure speculation at this point but can you try removing all of the content from pages and just leave a long text to see if this flicker persists? If so then the issue is definitely because of the radio’s style override.

Hope it helps!

Thanks Ashish. I have already taken the radio button out of that page and replaced with a a selectbox and the flicker still persists. If I remove the container, the flicker is gone. I’ll try what you say and get back to you.

Thanks again,

Dinesh

Hi @ash2shukla,

Here is a new streamlit screencast showing the same behavior. I can also make it happen on a OS X. The link to the recording: https://drive.google.com/file/d/1jE5lq-dOGfZju5B6bdQZOZfKv0QVxSlY/view?usp=sharing

Dinesh

The code:
import streamlit as st
import time


def _main():

    st.set_page_config(layout="wide")

    foo = st.beta_container()
    col1, mid, col2 = st.beta_columns([2, 1, 2])

    _ = st.button('Press Me')

    with foo:
        with col1:
            st.text("""
My three big key insights for distance learning are:

    Use the first few days to build a container. NO content teaching. Just set up the ground rules together in a way that lets students experience some of the functionality of the classroom. Practice raising hands, keeping yourself on mute, changing how you see each other. “Let’s work together to create a space that feels brave, safe, and connected. This is new and awkward for all of us – including me. We can start with a list of what’s ok in here and what’s not.” Maybe you can even start with a check-in: Give us one word that describes how you’re feeling about school being online? Great practice of speaking and muting and following along.
    Anxiety shows up in weird ways when you’re teaching online. And, people don’t understand the norms. Set the norms so no one takes their computer to the bathroom. (It happened. Twice.) We want everyone to be seen and belong, and that means setting norms and expectations that are co-created with the class. THIS LEARNING ALSO APPLIES TO TEAMS WHO ARE WORKING TOGETHER ONLINE FOR THE FIRST TIME!
    Do not assume every student has the same attention span, the same level of wi-fi, access to private space, and the same number of supportive people in their homes. I teach grad students who have to use their phones as hot spots and log-in between jobs or in closets. We have to check our expectations and privilege. We want everyone to be seen and belong.
    Small chunks. No more than 30 minutes online. You can meet up several times a day, but the best teachers in the world can’t hold attention longer than that. Think about the research that went into TED setting an 18-minute limit for their talks. That’s all we can take sometimes. You can break kids into small groups for a lengthy assignment, but for the big classroom they will start to drift after 20 minutes. After 30, they’re gone. Heck, I’m gone.
""")

        time.sleep(2)
        with col2:
            st.markdown("""
And a note to parents.

I get how hard this is. In the podcast, I talk about hiding from my family in a tuba. It’s overwhelming. Some of us are very ready for virtual school to start up and some of us are scared. However weird the experience may be, we need to partner with teachers to try to make this work. LOTS and lots of grace.

There’s a growing movement of “We’re opting out of homeschooling or participating in the online stuff.” That’s your call. But here’s one thing I would say:  Watch screen time. Limitless screen time during an emergency that’s going to last for weeks is not reducing anxiety. It’s throwing gasoline on it. Let them read or do nothing.

Whether we’re onboard for online or we’re opting out, we should all do our kids a huge favor right now and let them experience boredom.

But, we must be ready. Boredom will be an FFT for a lot of our children who have TikTok, memes, and games at the ready, 24 hours a day.

Just as we can come out of our skin during hard first times, they will too. It will take hours of complaining about feeling like they’re dying before they settle into that strange place that’s rarely visited by today’s children – their imagination.  We don’t need to entertain them, we need to model vulnerability for them and support them in this FFT.

Boredom is sacred. We shouldn’t deny our children this holy experience.

As we all try to put one foot in front of the other, my team and I are committed to getting relevant content to you via the podcast, social posts, and the blog. Sometimes serious, sometimes not serious at all. We need it all right now!

Once we’re on the other side of this pandemic, we’ll release podcast episodes every Wednesday. Right now, we’re dropping bonus episodes – some COVID-19 related and some not. Please join us!
""")


if __name__ == "__main__":
    _main()

Hey @ddutt,

Thanks for the reproducible code sample.
Try changing it to this, it fixes the issue on my end.

import streamlit as st
import time

def create_layout():
    foo = st.beta_container()
    with foo:
        col1, mid, col2 = st.beta_columns([2, 1, 2])

    text_col1 = col1.empty()
    text_col2 = col2.empty()

    _ = st.button('Press Me')

    return {
        "text1": text_col1,
        "text2": text_col2
    }


def dynamic_data(text1, text2):
    text1.text("""
My three big key insights for distance learning are:

    Use the first few days to build a container. NO content teaching. Just set up the ground rules together in a way that lets students experience some of the functionality of the classroom. Practice raising hands, keeping yourself on mute, changing how you see each other. “Let’s work together to create a space that feels brave, safe, and connected. This is new and awkward for all of us – including me. We can start with a list of what’s ok in here and what’s not.” Maybe you can even start with a check-in: Give us one word that describes how you’re feeling about school being online? Great practice of speaking and muting and following along.
    Anxiety shows up in weird ways when you’re teaching online. And, people don’t understand the norms. Set the norms so no one takes their computer to the bathroom. (It happened. Twice.) We want everyone to be seen and belong, and that means setting norms and expectations that are co-created with the class. THIS LEARNING ALSO APPLIES TO TEAMS WHO ARE WORKING TOGETHER ONLINE FOR THE FIRST TIME!
    Do not assume every student has the same attention span, the same level of wi-fi, access to private space, and the same number of supportive people in their homes. I teach grad students who have to use their phones as hot spots and log-in between jobs or in closets. We have to check our expectations and privilege. We want everyone to be seen and belong.
    Small chunks. No more than 30 minutes online. You can meet up several times a day, but the best teachers in the world can’t hold attention longer than that. Think about the research that went into TED setting an 18-minute limit for their talks. That’s all we can take sometimes. You can break kids into small groups for a lengthy assignment, but for the big classroom they will start to drift after 20 minutes. After 30, they’re gone. Heck, I’m gone.
""")

    time.sleep(2)
    text2.markdown("""
And a note to parents.

I get how hard this is. In the podcast, I talk about hiding from my family in a tuba. It’s overwhelming. Some of us are very ready for virtual school to start up and some of us are scared. However weird the experience may be, we need to partner with teachers to try to make this work. LOTS and lots of grace.

There’s a growing movement of “We’re opting out of homeschooling or participating in the online stuff.” That’s your call. But here’s one thing I would say:  Watch screen time. Limitless screen time during an emergency that’s going to last for weeks is not reducing anxiety. It’s throwing gasoline on it. Let them read or do nothing.

Whether we’re onboard for online or we’re opting out, we should all do our kids a huge favor right now and let them experience boredom.

But, we must be ready. Boredom will be an FFT for a lot of our children who have TikTok, memes, and games at the ready, 24 hours a day.

Just as we can come out of our skin during hard first times, they will too. It will take hours of complaining about feeling like they’re dying before they settle into that strange place that’s rarely visited by today’s children – their imagination.  We don’t need to entertain them, we need to model vulnerability for them and support them in this FFT.

Boredom is sacred. We shouldn’t deny our children this holy experience.

As we all try to put one foot in front of the other, my team and I are committed to getting relevant content to you via the podcast, social posts, and the blog. Sometimes serious, sometimes not serious at all. We need it all right now!

Once we’re on the other side of this pandemic, we’ll release podcast episodes every Wednesday. Right now, we’re dropping bonus episodes – some COVID-19 related and some not. Please join us!
""")


def _main():

    st.set_page_config(layout="wide")
    placeholders = create_layout()
    dynamic_data(**placeholders)
    
if __name__ == "__main__":
    _main()

The above snippet is one self-made rule that I follow. Allocate placeholders for changing content using .empty(), and give the static content in the create_layout function and return a dict of the placeholders.
Use these placeholders in another function to dynamically change the elements. It makes the layout way more predictable and the logic / layout code more separate.

I modified it a little more to test it out further and it looks like that was indeed the issue.

import streamlit as st
import time
from random import random

def create_layout():
    foo = st.beta_container()
    with foo:
        col1, mid, col2 = st.beta_columns([2, 1, 2])

    text_col1 = col1.empty()
    text_col2 = col2.empty()

    _ = st.button('Press Me')

    return {
        "text1": text_col1,
        "text2": text_col2
    }

x = """
My three big key insights for distance learning are:

    Use the first few days to build a container. NO content teaching. Just set up the ground rules together in a way that lets students experience some of the functionality of the classroom. Practice raising hands, keeping yourself on mute, changing how you see each other. “Let’s work together to create a space that feels brave, safe, and connected. This is new and awkward for all of us – including me. We can start with a list of what’s ok in here and what’s not.” Maybe you can even start with a check-in: Give us one word that describes how you’re feeling about school being online? Great practice of speaking and muting and following along.
    Anxiety shows up in weird ways when you’re teaching online. And, people don’t understand the norms. Set the norms so no one takes their computer to the bathroom. (It happened. Twice.) We want everyone to be seen and belong, and that means setting norms and expectations that are co-created with the class. THIS LEARNING ALSO APPLIES TO TEAMS WHO ARE WORKING TOGETHER ONLINE FOR THE FIRST TIME!
    Do not assume every student has the same attention span, the same level of wi-fi, access to private space, and the same number of supportive people in their homes. I teach grad students who have to use their phones as hot spots and log-in between jobs or in closets. We have to check our expectations and privilege. We want everyone to be seen and belong.
    Small chunks. No more than 30 minutes online. You can meet up several times a day, but the best teachers in the world can’t hold attention longer than that. Think about the research that went into TED setting an 18-minute limit for their talks. That’s all we can take sometimes. You can break kids into small groups for a lengthy assignment, but for the big classroom they will start to drift after 20 minutes. After 30, they’re gone. Heck, I’m gone.
"""
y = """
And a note to parents.

I get how hard this is. In the podcast, I talk about hiding from my family in a tuba. It’s overwhelming. Some of us are very ready for virtual school to start up and some of us are scared. However weird the experience may be, we need to partner with teachers to try to make this work. LOTS and lots of grace.

There’s a growing movement of “We’re opting out of homeschooling or participating in the online stuff.” That’s your call. But here’s one thing I would say:  Watch screen time. Limitless screen time during an emergency that’s going to last for weeks is not reducing anxiety. It’s throwing gasoline on it. Let them read or do nothing.

Whether we’re onboard for online or we’re opting out, we should all do our kids a huge favor right now and let them experience boredom.

But, we must be ready. Boredom will be an FFT for a lot of our children who have TikTok, memes, and games at the ready, 24 hours a day.

Just as we can come out of our skin during hard first times, they will too. It will take hours of complaining about feeling like they’re dying before they settle into that strange place that’s rarely visited by today’s children – their imagination.  We don’t need to entertain them, we need to model vulnerability for them and support them in this FFT.

Boredom is sacred. We shouldn’t deny our children this holy experience.

As we all try to put one foot in front of the other, my team and I are committed to getting relevant content to you via the podcast, social posts, and the blog. Sometimes serious, sometimes not serious at all. We need it all right now!

Once we’re on the other side of this pandemic, we’ll release podcast episodes every Wednesday. Right now, we’re dropping bonus episodes – some COVID-19 related and some not. Please join us!
"""
def dynamic_data(text1, text2):
    time.sleep(1)
    text1.text(x*int(random()*2))

    time.sleep(1)
    text2.markdown(y*int(random()*2))


def _main():

    st.set_page_config(layout="wide")
    placeholders = create_layout()
    dynamic_data(**placeholders)
    
if __name__ == "__main__":
    _main()


I am not sure exactly why this happens but it definitely has something to do with streamlit cursor count.

Hope it helps !

2 Likes

@ash2shukla,

Thanks a million. That was very helpful. I do seriously think all these tips should be collected and provided as valuable advice for people using Streamlit.

I’ll probably write an article in the next week or two, about my experience with Streamlit, put in the lessons I learnt, and quote you. Your insights into using Streamlit have been extremely insightful.

Happy holidays,

Dinesh

2 Likes

Thanks @ddutt for your kind words :slight_smile:

Happy Holidays !