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
@dataprofessor @ferdy @tonykip Please suggest a solution to this. It is required in my project.
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!
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
Can you share the repo with your code?
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.
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')
Wonderful! Super duper amazing! Thank you so much @ferdy sir. This is exactly what I wanted. Its working.
This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.
