Long slider text overlapping

Community Cloud
1

My app used to look fine, but now all the long slider text overlaps the text above and the slider itself. I added a few blank line writes to correct some of the overlaps with the preceding text but don’t know what to do about it overlapping with the slider other than shortening the text (which I’d rather not). I do not specify a version in requirements.txt, so I assume it’s something to do with a new streamlit version? My app is here: https://share.streamlit.io/mmwilber/ak_ev_calculators/main/EV_Emissions.py
Any help is greatly appreciated!

2

Hey @mmwilber

I looked through your code, and I believe the overlapping is because of the amount of text you’ve put in for the st.slider argument. I would suggest you put something concise as you did for the other sliders and put the remaining text above using either st.markdown or st.write.

image
image2304×246 62 KB

Cheers!
Rohan

3

Can I just specify an older version of streamlit? This same code didn’t have any layout problems until recently?

4

Probably yes, considering that you’ve already noticed that difference. But, I don’t think that’s the root cause of it. I was suggesting, you change the code to something like this,

note = '''If you don't know, leave it at the default value here,
which is specific to your community but might be a couple of years out of date. 
Another caveat - the default is based on total utility emissions, 
but additional electricity may come from a cleaner or dirtier source. For instance, in Fairbanks, 
any new electricity is likely to be generated from Naptha, which is cleaner than the utility average, 
so a better value to use below for Fairbanks might be 0.54?:'''

cpkwh = st.slider(" How many kg of CO2 are emitted per kWh for your utility?", max_value = 2.0, value = cpkwh_default)
st.markdown(f"*{note}*")

And get the following…

image
image724×456 54.8 KB

5

Thanks, Rohan, that is an elegant solution that may be better than specifying a version. However, this is not the first time this calculator has had problems with a version upgrade, and I don’t really have the time to keep updating the formatting, so I found a version that makes it look the way it did originally (0.72.0) and just specified that, problem solved. If I write new apps that would benefit from new functionality or significantly upgrade this one I will keep in mind to keep my slider text short and sweet! Of course in the time it took me to type this response to you I could have just made the changes to the text :wink:

1 Like