How to add a div in streamlit without closing it at the same time?

Using Streamlit
,
1

I am adding html in streamlit like this

import streamlit as st
from streamlit.components.v1 import html

html('<div class="Testing">)

st.write("hello")

html('</div>">)

Output Roughly:

<div class="Testing"></div>
<div><span>hello</span></div>
<div></div>

Output Expected:

<div class="Testing">
<span>hello</span>
</div>

This creates 3 different sections in the final output page, and none of them are related to each other in any way. Is there a way to achieve what I am trying to do in streamlit?

I tired st.markdownas well, same problem.

What I am trying to do is

Option 1:

  1. Start a div
  2. Add a lot of streamlit components, like buttons, text boxes etc …
  3. Close the div.

Option 2:

  1. I have a table like structure with lot of columns and rows in a container.
  2. I want to add a horizontal scroll bar into the overall container.
  3. I need input boxes and buttons inside the table, hence I was told I can’t use dataframe.

Streamlit version : 1.30

2

You can’t create open-ended divs like that in Streamlit. Each Streamlit command is wrapped in its own div (even st.html) so incomplete, open HTML can’t span across commands.

st.data_editor let’s you have certain types of input, but yes, buttons are not supported. You can use a checkbox instead of a button, or build buttons on the outside of the dataframe.

I usually think of row selections and st.dataframe for some kind of row-by-row action.

If you just want to wrap a bunch of Streamlit components, use st.container.

Can you describe more specifically what you are trying to accomplish? As described above, you might need a custom component, but you might get away with some CSS hacking on the div from st.container.

3

Hi @Vikash

Is this what you are looking for?

htmlstr = """
<div class='Testing'>
<span>Hello</span>
</div>
"""

st.write(htmlstr)
st.html(htmlstr)

You can probably start your code with something like:

htmlstr = ""

and then incrementally add to it like:

htmlstr += "<div class='Testing'>"

htmlstr += "<span>Hello</span>"

htmlstr += "</div>"

This way, you will be able to add the html equivalents of streamlit components (if/as needed), and not streamlit components themselves.

Cheers

1 Like
4

How will you handle case of graphs,
if i want to place graphs inside div.

    st.markdown('<div class="container">', unsafe_allow_html=True)
    st.markdown('<div class="container-title">Metric A</div>', unsafe_allow_html=True)
    st.line_chart(data["Metric A"], use_container_width=True)
    st.markdown('</div>', unsafe_allow_html=True)

Graph is not commine inside div