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 :
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