St.columns on mobile (to-do list app) + session state demo bug

[Fhireman]

Hi all!

I’m currently messing around with a to-do list idea and wanted to see if it’s possible in Streamlit
(found a video on a to-do list app in Streamlit but it uses selectboxes for the functionality which is a bit user unfriendly and wanted to try and build something better).

But while using st.columns to start laying out the app I noticed that the columns aren’t holding up on mobile, I’m curious if it’s intended behavior to preserve horizontal space but that would mean there is currently no good way to lay-out widgets horizontally on mobile.

This is my code snippet:

import streamlit as st

leftcol, rightcol = st.columns(2)

with leftcol:
    with st.form(key='form'):
            item_one = st.text_input("list item 1")
            item_two = st.text_input("list item 2")
            submit_button = st.form_submit_button(label="Submit")

with rightcol:
    radio = st.radio("", ["add field", "delete field"])

On laptop it shows like this:

And the same code on phone:

I’m also curious why there is no st.button substitute for use in st.form(I’d love to use those ideally instead of radio buttons). I know buttons are stateless but couldn’t they be used to generate new form inputs on click? Or run some function without having to leave the pretty st.form.

Ideally I’d love to be able to nest columns to achieve something like this code snippet:

import streamlit as st

leftcol, rightcol = st.columns(2)

with leftcol:
    with st.form(key='form'):
            item_one = st.text_input("list item 1")
            item_two = st.text_input("list item 2")
            submit_button = st.form_submit_button(label="Submit")

with rightcol:
    left_in_rightcol, right_in_rightcol = st.columns(2)
    with left_in_rightcol:
        st.button("Add field")
    with right_in_rightcol:
        st.button("Delete field")

And it would end up looking like this:

Or some way to horizontally put some buttons in a st.form:

Is something like these layouts possible by any means?

[Fhireman]

Just thinking out loud here, maybe a way easier solution than messing with nested layouts would be to reuse the st.number_input widget and wire up the + and - buttons to be used in a custom or user defined function?

This way instead of incrementing and decrementing the number input we could add a new row underneath with + and delete the current row with - and have the input field just accept a string so we can do about anything with it.
(and hopefully grab a reference to each input after a submit button so we can do stuff with it )

st.row_input sounds pretty good. I think it would be a very welcome addition to st.form!

[Marisa_Smith]

Hey @Fhireman,

Have you seen the new session state app that was released with the 0.84 version of Streamlit?

This session state app has an example of a to-do app that is much easier to code with the built-in st.session_state object you now have access to!

I like your ideas around the + and - buttons of the number input! Did you know that community members can request new features on our Github issues?

If it’s something you are really keen on you can request it there, share it around and if it gets enough support the Team generally looks at how feasible it is to incorporate the most popular suggestions into Streamlit! (we are very receptive to community involvement and suggestions!)

Happy Streamlit-ing!
Marisa

[Fhireman]

Hey Marisa,

I’m an idiot! I’ve read the session state post a couple of times but the to-do list part of the update didn’t stick with me for some reason, thanks for linking it.

I see the demo still requires a bit of a workaround with the styling(I wouldn’t know I would need these exact classes to get it done by myself so it might explain my need/search for an easier widget that could function as a to-do list item):

st.write(
        "<style>.main * div.row-widget.stRadio > div{flex-direction:row;}</style>",
        unsafe_allow_html=True,
)

And for the strikethrough:

format_str = (
'<span style="color: grey; text-decoration: line-through;">{}</span>'
)

So even though with my idea of re-using the number_input widget the to-do items don’t get a strikethrough to mark them done I still think it adds a useful (easy and Streamlit-like) widget that doesn’t require tinkering with the styles to make a sort of to-do list

I might submit a feature request for it next week but first I’m diving into the code of a number_input widget and see how a Streamlit component works under the hood cause it feels like magic for now

Thanks again!

[Fhireman]

Hey again @Marisa_Smith ,
I had marked your response as the solution but unfortunately I found a bug in the to-do list demo so it doesn’t seem to be a solution to what I’m looking for, for now.
If you start adding some items to the list the checkbox and the text starts floating further and further apart with each new item like so:

I copied the code of that Streamlit demo and tested it locally as well but am getting the same result.
If you could let the demo creators know about it they can update the demo(or take it offline for a bit) since it’s probably going to be copied a lot as an example now that session state is still pretty new.

(after about 27 items on the list the description is a full line ahead of the checkbox, so checking the checkbox next to 26 will strikethrough the description of 27):

[Marisa_Smith]

Hey @Fhireman!

@Fhireman

I’m an idiot!

First, no you are not! Session state is brand new and there are a LOT of new features that people have read and then forgotten about (including myself! )

@Fhireman

If you start adding some items to the list the checkbox and the text starts floating further and further apart with each new item like so:

Second, thanks so much for catching this! I just tested on my end and the same thing is happening for me as well! I have sent this on to the team to check out, I remember testing this app when we first launched state I don’t remember having this issue, so hopefully it’s a simple and quick fix!

Happy Streamlit-ing!
Marisa

[Fhireman]

Hahah I remember reading it before and thought to myself that the to-do demo was exactly what I needed for an idea of mine so it felt a bit dumb forgetting about it!

And no problemo, I saw some changes in font sizes being done the past few small releases so maybe one of those made the styling go out of place by 1px each time? Unsure if it’s related but I hope they can find an easy fix for it
But it kind of emphasizes my point of the need of such a Streamlit widget(without custom styling/allow_unsafe_html needed) that could magically append a new row underneath with just a tap of the + button, or remove one with a -.
I feel like there are lots of use cases for this in a survey or form for instance.

[Marisa_Smith]

Hey @Fhireman,

The team has gotten back to me already! The creator of this app @jrieke is out on vacation so we will tackle this once he is back from summer holidays! (~2 weeks)

Currently we think that because hs is using some custom markdown in the app to write the text to the checkbox and (as you suspected) we think this is causing a misalignment. You may be able to use this right away if you remove the custom markdown for the text (I haven’t had a chance to test this myself yet, just wanted to spitball some options for you!)

Happy Streamlit-ing!
Marisa

[Fhireman]

That’s a rapid response!

No rush, everyone needs their holidays and rest haha
I’ll try to remove the custom styling and maybe poke around in the number_input widget as well to see if I can modify it into the widget I was suggesting

If I get something working I’ll open up a PR so the dev team can take a look if it’s feasible

[jrieke]

Hey @Fhireman! Thanks for catching this bug, good eye for details! It was an issue with how I created columns in the app (and a good reminder we should have proper grid layout!). Not related to session state at all.

Anway, I just put in a fix, it should work as expected now. The trick is to create a new st.columns for each new todo item, so the checkbox and the text are properly aligned. See here.

Cheers, Johannes