Like/Dislike button spacing

Using Streamlit
1

Hello,

I have used like and dislike buttons to create like dislike option in my Streamlit app.

The problem that I am facing is that while it runs well on normal screen, once accessing app from Mobile the buttons will change positions to be one on top of each-other rather than one beside one another.

Is there a solution that can help me fix this minor issue?

  col1, col2, col3, col4 = st.columns([3, 3,0.5,0.5])
                with col3:
                    with st.container():
                        st.button(":thumbsup:",on_click="do something")
                with col4:
                    with st.container():
                        st.button(":thumbsdown:",on_click="do something")
                col3.write(' ')
                col4.write(' ')
2

Hi @starskiin3d

It seems that you’ve embedded the buttons inside a container, have you tried removing those containers that currently encapsulates the buttons.

Alternatively, Trubrics (https://trubrics.com/) provides a similar functionality where users can provide in-app feedback via thumbs up/down as well as written feedback.

Hope this helps!

3

Hi,

Do not really want to use Trubrics , and removing containers did not work. Any other suggestions?

4

Hi @starskiin3d

I guess it could work if you reduce the width of col1 & col2 to something less than 3. You probably need to play around with the figures, so that it works for you on both, the laptop/desktop as well as mobile.

Cheers

5

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