Centre widget horizontally within column

[Shawn_Pereira]

Hi, is there a way to centre a widget (eg. st.button) horizontally within a column?

Thanks in advance.

[Charly_Wargnier]

Hi @Shawn_Pereira

Thanks for your question.

Would you be able to provide a quick mock-up of what you are after?

Many thanks,
Charly

[Shawn_Pereira]

Hi @Charly_Wargnier, thanks for replying.

I am in the process of creating a calendar application - ref pix.

I am unable to horizontally centre the widgets (st.buttons with emoji) within each of the 7 weekday columns.

Additionally, I set the sidebar length to 440px. Because of this, it does not completely close. Is that a bug / limitation?

Cheers

[Charly_Wargnier]

Thanks for sending this @Shawn_Pereira

Would it be possible for you to share the code? I’ll try to make this work

As for the sidebar, its length can’t be modified currently.

Many thanks,
Charly

[Shawn_Pereira]

Hi @Charly_Wargnier

For the sake of brevity, I have added the stripped down code for the 1st week of Dec-2021.

import streamlit as st
from datetime import datetime as dt
import calendar as clndr

cyr = 2021
cmnt = 12
myclndr = clndr.monthcalendar(cyr, cmnt)
wk1 = myclndr[0]
html_str_a = “

”
html_str_b = “

”

cols = st.columns(7)
for vday in wk1:
if vday > 0:
cols[vday].markdown(html_str_a + str(vday).zfill(2) + html_str_b, unsafe_allow_html=True)
cols[vday].button(“”, key=f"DY{vday}")
else:
cols[vday].write(" ")

Thanks in advance

Cheers

[Charly_Wargnier]

Thanks, @Shawn_Pereira. We’ll have a look

Meanwhile, not sure if you’ve seen, but @andfanilo has created an excellent video tutorial (another one!) on how to create a pseudo grid layout using Streamlit columns, you may find it interesting.

Build a pseudo Grid Layout with Streamlit columns

Best,
Charly

[Shawn_Pereira]

Thanks @Charly_Wargnier , I saw the video.

I look forward to the future releases of Streamlit for more possibilities with the same ease of use.

Streamlit is really awesome and is now my go-to tool for every web programming project.

God bless.

[andfanilo]

Not sure I totally understood, but with your code snippet are you talking

Instead of

?

You can cheat an answer through the CSS hack, if you know your way around CSS:

import streamlit as st
from datetime import datetime as dt
import calendar as clndr

cyr = 2021
cmnt = 12
myclndr = clndr.monthcalendar(cyr, cmnt)
wk1 = myclndr[0]
html_str_a = ""
html_str_b = ""
cols = st.columns(7)

for vday in wk1:
    if vday > 0:
        cols[vday].markdown(
            html_str_a + str(vday).zfill(2) + html_str_b, unsafe_allow_html=True
        )
        cols[vday].button(":spiral_calendar:", key=f"DY{vday}")
    else:
        cols[vday].write(" ")

st.markdown(
"""
<style>
div[data-testid="stVerticalBlock"] div[data-testid="stMarkdownContainer"] p {
	background-color:red;
	text-align: center;
}
</style>
""",
unsafe_allow_html=True
)

I tried summarizing here: CSS hacks for the dumb? - #3 by andfanilo

And @dataprofessor made a video about it How to apply custom CSS styles in Streamlit apps - YouTube

It’s hard to deal with and maintain but possible. I don’t think there is a Github issue on that though (we do have the horizontal align issue: Vertical alignment for columns · Issue #3052 · streamlit/streamlit (github.com) so feel free to create an issue to track it.

Best,
Fanilo

[Shawn_Pereira]

Hi @andfanilo , thanks for responding.

No, my issue is not with CSS. In fact, with my earlier copy-paste, I see that the values of html_str_a and html_str_b are blank. I tried re-pasting the code, but these variables still turn out blank!

I have got my desired effect as you can see with the pix; however, I cant seem to be able to horizontally centre the st.buttons right below the day numbers.

Thanks