Streamlit popover customization

[thisisbhupendrasingh]

Hi there! I am attaching an image for reference showing that I am trying to create multiple popovers based on data. But as you can see there no uniformity in them. I want to customize them have uniform size and background color. How can I do that ?? Please help.

#popover #streamlitpopover #markdown #streamlit-popover Custom Components css

[thisisbhupendrasingh]

@dataprofessor @ferdy @tonykip Please suggest a solution to this. It is required in my project.

[dataprofessor]

Hi @thisisbhupendrasingh

There are too many elements in a single row, in order to have it look visually better, the popover elements would need more width space.

A possible solution: I’d suggest to create a for loop that dynamically assigns each of the popover elements to a specific column.

For example, say you want to create 5 columns and you have 10 elements, then you’d create a for loop that dynamically assigns element 1 to column 1 of row 1, element 2 to column 2 of row 1, …, element 9 to column 4 of row 2, and element 10 to column 5 of row 2.

Thus, you’ll probably need 2 nested for loops where the first would iterate through the row and the second one would iterate through the columns.

Hope this helps!

[thisisbhupendrasingh]

Thank you for your response @dataprofessor . Actually, I have done the same.

    counter = 1
    for row in range(rows_required):
        keyword_containers = st.container()
        with keyword_containers:
            if counter > total_keys:
                break
            columns = st.columns(10)
            index = 0
            for key,val in keys_count_desc.copy().items():
                with columns[index]:
                    st.button(f"{key} : {val}",key=counter, help="Click to show the data!", on_click=keyword_records, kwargs={"keyword":key}, use_container_width=True)
                counter+=1
                index+=1
                keys_count_desc.pop(key)
                if index>9:
                    break

In the above code, I have replaced st.popover with st.button but the purpose is same, i.e., to display data. But the labels that these buttons/popover are having could be too long to be inside that container, sometimes. That’s why I was looking for fixed-sized(width-hight) buttons or popover tricks so that it could look better on the dashboard.
Also please suggest, how we customize

[tonykip]

Can you share the repo with your code?

[thisisbhupendrasingh]

Hi @tonykip thank you for your response! Can you please help me without the repo access. I have shared the main block of code here.

[ferdy]

@thisisbhupendrasingh

I want to customize them have uniform size and background color. How can I do that ?

The stylable container can be used to set fix width and height, color etc. Here is an example.

    with stylable_container(
        key="lightblue_button",
        css_styles="""
            button {
                width: 150px;
                height: 80px;
                background-color: lightblue;
                color: black;
                border-radius: 5px;
                white-space: nowrap;
            }
            """,
    ):
        st.button("lightblue button")

    with stylable_container(
        key="green_popover",
        css_styles="""
            button {
                width: 150px;
                height: 60px;
                background-color: green;
                color: white;
                border-radius: 5px;
                white-space: nowrap;
            }
            """,
    ):
        po = st.popover(label='green popover')
        po.text_input('name', key='name')

[thisisbhupendrasingh]

Wonderful! Super duper amazing! Thank you so much @ferdy sir. This is exactly what I wanted. Its working.