Control the buttons and customizing elements

[Sin-Wing_Li]

Hello @everyone,
I am excited to connect with you.
There are a few challenges to building a streamlit app.

I am building “Tents and Trees” puzzle solver app. Do you know about it?
In my UI, there are two buttons (“Create”, “Solve”). When I click the “Create” button, I see the input grid map, and when I click the “Solve” button, I see the solution grid map. But when I see the solution grid map, the input grid map disappears with it. Also, below the solution map is a step slider to show all steps of solution, but when I click the slider, the solution map disappears. This is driving me crazy.
Beyond that, there are a few other issues, such as customizing the size of elements and containers, the position of elements, etc.

I’ve attached some images to help you understand.
Please help me with this issue. I need to resolve this issue ASAP.
Regards.

[Goyo]

This is most likely due to bugs in your code.

[ibvhim]

Hello @Sin-Wing_Li,

@Sin-Wing_Li

Also, below the solution map is a step slider to show all steps of solution, but when I click the slider, the solution map disappears.

It seems like the issue with the solution map disappearing could be related to the st.slider widget as it updates every time you click and drag it.

“Every time a user interacts with a widget, Streamlit simply reruns your script from top to bottom, assigning the current state of the widget to your variable in the process.” (Learn more about streamlit widget flows).

So, my assumption is that because it reruns the script it probably takes time to render the grid map again.

[Sin-Wing_Li]

Thanks for your response.
Could you explain about how to set the container name in css code for customizing the individual container?
Like this:

[what can I write here?]{{ width: 400px; }}

Regards.

[ibvhim]

You’re always welcome!

You can Inspect Element the page and then find the class name of the container you would like to modify. For example; the component I’d like to modify has a class and its value is “st-emotion-cache-1r6slb0”

Once you have the class you can then create a style.css file and customize the component as you like. Here’s an example of my style.css file:

div.st-emotion-cache-1r6slb0 {
    padding: 6px;
    border: 2px solid rgb(255, 245, 245);
    border-radius: 6px;
    background-color: rgb(219, 221, 221);
    opacity: 0.5;
    text-align: center;
}

div.st-emotion-cache-1r6slb0:hover {
    padding: 6px;
    border: 2px solid rgb(255, 0, 0);
    border-radius: 6px;
    text-align: center;
    opacity: 1;
}

Tip: You can even add effects to play upon hovering over the component as you can see in the code above.

To apply the style to your app, all you need to do is add the following lines to your main code:

# Read the style.css file
with open("style.css") as css_style:
    st.markdown(f"<style>{css_style.read()}</style>", unsafe_allow_html=True)

---

Output

TL:DR; Inspect element the component → Get desired component’s class value → Modify component in CSS file → Read the CSS file

[Sin-Wing_Li]

Thanks for your detailed explanation.
I applied this in my app, but there is a problem.
Some classes have the same name.

For example, Like this:

In this case, some of the elements have the same class name, so applying the CSS will change both elements to be the same.

How can I solve this problem?

Customizing in Streamlit makes me crazy and confuse.

Regards.