Button padding-left change

Using Streamlit
,
1

Hi everyone !

I’m posting here after spending part of my afternoon trying to find a solution.

I’d like to change the padding-left of one of my buttons to get this result :
Screenshot 2024-03-20 at 17.17.38

I’ve played with the columns, but this doesn’t give me the desired number of pixels of offset.

Searching the forum, I found this answer: Create 2 different buttons

However, trying to adapt the code still doesn’t work. Not coding in javascript, I don’t know where my mistake is.

## -- Custom CSS -- ##
def ChangeButtonPadding(widget_label, padding_left):
    htmlstr = f"""
        <script>
            var elements = window.parent.document.querySelectorAll('button');
            for (var i = 0; i < elements.length; ++i) {{
                if (elements[i].innerText == '{widget_label}') {{
                    elements[i].style.paddingLeft = '{padding_left}px';
                }}
            }}
        </script>
        """
    components.html(f"{htmlstr}", height=0, width=0)

## -- Functions Switch Page -- ##
def login():
    log_button = st.button("Log In", key='b1')
    ChangeButtonPadding("Log In", "46")

    if log_button:
        st.switch_page("pages/login.py")

def register():
    register_button = st.button("New User")

    if register_button:
        st.switch_page("pages/register.py")

## -- Connection Section -- ##
co_1, co_2, co_3, co_4 = st.columns((5,1,1,5))

with co_2:
    login()

with co_3:
    register()

If anyone has an idea/solution, I’d be grateful. Thanks in advance

2

Hi @CharleyDL

Why not use AntD buttons (https://nicedouble-streamlitantdcomponentsdemo-app-middmy.streamlit.app/) with align = start. You can couple that with st.columns, if required. It’s seems easier that way.

Cheers

3

Thank you @Shawn_Pereira for the discovery!
It looks interesting on paper, but it doesn’t seem to work with switch_page. By reloading the Home page, it accesses the login page directly, without having to click.

1st approach

log_in = sac.buttons([
    sac.ButtonsItem(label='Log In')
    ], align='end')


if log_in:
    st.switch_page("pages/login.py")

2nd approach

sac.buttons([
        sac.ButtonsItem(label='Log In',
                        href=st.switch_page("pages/login.py"))
        ], align='end')

The components seems to be only useful for external link, but not in switch_page case.

4

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