HTML is displayed as plain text

🎈 Using Streamlit
, ,
1

Hey everyone!

I am trying to display contents of a pandas dataframe within a designated container. This is my code:

data = {
    'name': ['A', 'B', 'C'],
    'date': ['A', 'B', 'C'],
    'amount': ['A', 'B', 'C'],
    'description': ['A', 'B', 'C'],
    'category': ['A', 'B', 'C'],
}
tr_df = pd.DataFrame(data)

container_html = '<div class="content-container">'
for index, row in tr_df.iterrows():
    container_html += f"""
        <div class="data-container">
            <h3 class="data-field">{row['name']}</h3>
            <p class="data-field"><span class="data-label">Date:</span> {row['date']}</p>
            <p class="data-field"><span class="data-label">Amount:</span> {row['amount']}</p>
            <p class="data-field"><span class="data-label">Description:</span> {row['description']}</p>
            <p class="data-field"><span class="data-label">Category:</span> <span class="data-value">{row['category']}</span></p>
        </div>
    """
container_html += '</div>'  # Close the main content container
st.markdown(container_html, unsafe_allow_html=True)

however, it is displayed like this:

image
image1318×717 45.5 KB

(the first dataframe row is displayed correctly, but all following rows are displayed as plain text and not rendered correctly.)

I am running the app locally.

Any hints on what can be improved here? :slight_smile:

Kind regards,
Max

2

Display your code as text and not as an image.

3

changed it :slight_smile:

1 Like
4

Remove the blank lines.

for index, row in tr_df.iterrows():
    container_html += f"""<div class="data-container">
            <h3 class="data-field">{row['name']}</h3>
            <p class="data-field"><span class="data-label">Date:</span> {row['date']}</p>
            <p class="data-field"><span class="data-label">Amount:</span> {row['amount']}</p>
            <p class="data-field"><span class="data-label">Description:</span> {row['description']}</p>
            <p class="data-field"><span class="data-label">Category:</span> <span class="data-value">{row['category']}</span></p>
        </div>
    """

Alternatively, see if the new st.html can handle it.

This might be a bug in st.markdown, I am not sure.

5

The code you provided fixes it! Thank you very much!! :slight_smile: