HTML and CSS not rendering as expected in Streamlit Markdown

murat_tasci · December 22, 2022, 7:30am

Summary

When the code generates html and css, the result is not the same as what it shows in streamlit. I want both to look the same.

Steps to reproduce

Code snippet:

import streamlit as st
import streamlit.components.v1 as components



# Page config
st.set_page_config(
        page_title= "Multipage App",
        page_icon="📁")






# Customization for sidebar
st.markdown('<style>div[class="css-6qob1r e1fqkh3o3"] { background: url("https://media2.giphy.com/media/46hpy8xB3MiHfruixn/giphy.gif");background-repeat: no-repeat;background-size:350%;border:1px solid #36454F; border-top:none;} </style>', unsafe_allow_html=True)

# Hiding the Footer
hide_st_style =" <style>footer {visibility: hidden;}</style>"
st.markdown(hide_st_style, unsafe_allow_html=True)  



st.markdown("""
  <style>
      ul[class="css-uc76bn e1fqkh3o9"]{
        position: relative;
        position: relative;
        padding-top: 3rem;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: left;
      }
      
      
      .css-17lntkn {
        font-weight: bold;
        font-size: 24px;
        color: yellow;
        font-family: arial;
        border:black;
      }
      
      .css-pkbazv {
        font-weight: bold;
        font-size: 24px;
        color: yellow;
        font-family: arial;
      }
  </style>""", unsafe_allow_html=True)


st.markdown("""
<body>
  <section>
       
<h1>
<span>W</span>
<span>E</span>
<span>L</span>
<span>C</span>
<span>O</span>
<span>M</span>
<span>E</span>
</h1> 
   </section>


<style>


body {
  margin: 0;
  padding: 0;
  background: #000;
}

section {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  position: relative;
}

section::before {
  position: absolute;
  content: '';
  inset: 0;
  background: url('https://wallpapercave.com/wp/wp9597778.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0;
  
  animation: fadeInBackground 1s linear 8.5s forwards;
}

h1 {
  margin: 0px;
  padding: 0px;
  color: #ddd;
  font-size: min(9vw, 9rem);
  font-family: sans-serif;

}

h1 span {
   display: inline-block;
   animation: letterAnimation 1s linear forwards;
   border:2px solid black;
   border-radius: 4px;
   padding: 0.25rem;
   padding-bottom: 0;

  
}

@keyframes fadeInBackground {
  100% {
    opacity: 1;
  }
}

@keyframes letterAnimation {
  100% {
    opacity: 1;
	color: red;
	padding: 0.25rem;
	padding-bottom: 0;
	background-color: white;
    border: 2px solid red;
	border-radius: 4px;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	box-sizing: border-box;
  }
}

h1 span:nth-child(1) {
  animation-delay: 1.5s;
}

h1 span:nth-child(2) {
  animation-delay: 2.5s;
}

h1 span:nth-child(3) {
  animation-delay: 3.5s;
}

h1 span:nth-child(4) {
  animation-delay: 4.5s;
}

h1 span:nth-child(5) {
  animation-delay: 5.5s;
}

h1 span:nth-child(6) {
  animation-delay: 6.5s;
}

h1 span:nth-child(7) {
  animation-delay: 7.5s;
}



    
</style>
     

</body>""",unsafe_allow_html=True)

Expected behavior:

How it works in hmtl, there should be no difference in streamlit

Debug info

Streamlit version: v15.2.0
Python version: v3.8.0
Operating System: win 10
Browser: Chrome 108.0.5359.99
Virtual environment: -
streamlit view:

streamlit1361×613 254 KB

html and css view:

Caroline · December 22, 2022, 5:25pm

Hey @murat_tasci, is this question different from HTML Code Works Different In Streamlit (General Problem)? Have you tried the suggestions made on that thread?

murat_tasci · December 22, 2022, 6:05pm

I tried the suggestions it didn’t work.

Caroline · December 22, 2022, 6:08pm

Hi @murat_tasci, can you be a little more specific? Which suggestion did you try? What do you mean by “didn’t work”?

murat_tasci · December 22, 2022, 6:18pm

components.html("<html><body><mycodes </body></html>", 
width=200, height=200)

I tried this but my codes are way too long down, it seems like they want to be written side by side it takes a long time to add them side by side, I couldn’t see what the result of this method would be. That was the only suggestion I got. my code is also just html and css. I thought st.markdown would work on its own.

Caroline · December 22, 2022, 6:21pm

What do you mean by the code being too long down? Can you share a screenshot?

murat_tasci · December 22, 2022, 6:30pm

I tried using the code that provides the animation of the welcome text in the structure below, but it gave an error.

components.html("<html><body>

  <section>
       
<h1>
<span>W</span>
<span>E</span>
<span>L</span>
<span>C</span>
<span>O</span>
<span>M</span>
<span>E</span>
</h1> 
   </section>


<style>


body {
  margin: 0;
  padding: 0;
  background: #000;
}

section {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  position: relative;
}

section::before {
  position: absolute;
  content: '';
  inset: 0;
  background: url('https://wallpapercave.com/wp/wp9597778.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0;
  
  animation: fadeInBackground 1s linear 8.5s forwards;
}

h1 {
  margin: 0px;
  padding: 0px;
  color: #ddd;
  font-size: min(9vw, 9rem);
  font-family: sans-serif;

}

h1 span {
   display: inline-block;
   animation: letterAnimation 1s linear forwards;
   border:2px solid black;
   border-radius: 4px;
   padding: 0.25rem;
   padding-bottom: 0;

  
}

@keyframes fadeInBackground {
  100% {
    opacity: 1;
  }
}

@keyframes letterAnimation {
  100% {
    opacity: 1;
	color: red;
	padding: 0.25rem;
	padding-bottom: 0;
	background-color: white;
    border: 2px solid red;
	border-radius: 4px;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	box-sizing: border-box;
  }
}

h1 span:nth-child(1) {
  animation-delay: 1.5s;
}

h1 span:nth-child(2) {
  animation-delay: 2.5s;
}

h1 span:nth-child(3) {
  animation-delay: 3.5s;
}

h1 span:nth-child(4) {
  animation-delay: 4.5s;
}

h1 span:nth-child(5) {
  animation-delay: 5.5s;
}

h1 span:nth-child(6) {
  animation-delay: 6.5s;
}

h1 span:nth-child(7) {
  animation-delay: 7.5s;
}



    
</style>
     

</body>
</html>", width=200, height=200)

murat_tasci · December 22, 2022, 6:36pm

Caroline · December 22, 2022, 6:36pm

That error is due to the fact that you’re missing a closing double quote and close parenthesis

murat_tasci · December 22, 2022, 6:39pm

Actually, the parentheses close at the bottom, but I think it want everything to be written on a single line and only then will it detect closed.

mathcatsand · December 23, 2022, 12:32am

Multiline text in Python needs to be triple quoted.

my_txt = '''If I start my string literal with three
quotes, then I can keep writing my string
on the next line.'''

my_other_txt='If I do not want to use triple '\
'quotes, then I can use single quotes and '\
'end with a backslash to tell Python to '\
'continue parsing on the next line.'

murat_tasci · December 23, 2022, 9:41am

This is a bug and needs to be fixed. I am not getting the result I want at all.

# Libraries
import io
import os
import numpy as np
import pandas as pd
import streamlit as st
import fitz

import streamlit as st




import streamlit as st
import streamlit.components.v1 as components



# Page config
st.set_page_config(
        page_title= "Multipage App",
        page_icon="📁")






# Customization for sidebar
st.markdown('<style>div[class="css-6qob1r e1fqkh3o3"] { background: url("https://media2.giphy.com/media/46hpy8xB3MiHfruixn/giphy.gif");background-repeat: no-repeat;background-size:350%;border:1px solid #36454F; border-top:none;} </style>', unsafe_allow_html=True)

# Hiding the Footer
hide_st_style =" <style>footer {visibility: hidden;}</style>"
st.markdown(hide_st_style, unsafe_allow_html=True)  



st.markdown("""
  <style>
      ul[class="css-uc76bn e1fqkh3o9"]{
        position: relative;
        position: relative;
        padding-top: 3rem;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: left;
      }
      
      
      .css-17lntkn {
        font-weight: bold;
        font-size: 24px;
        color: yellow;
        font-family: arial;
        border:black;
      }
      
      .css-pkbazv {
        font-weight: bold;
        font-size: 24px;
        color: yellow;
        font-family: arial;
      }
  </style>""", unsafe_allow_html=True)

  

# I tried this way:
components.html("""<html><body>

<section>
       
<h1>
<span>W</span>
<span>E</span>
<span>L</span>
<span>C</span>
<span>O</span>
<span>M</span>
<span>E</span>
</h1> 
</section>


<style>


body {
  margin: 0;
  padding: 0;
  background: #000;
}

section {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  position: relative;
}

section::before {
  position: absolute;
  content: '';
  inset: 0;
  background: url('https://wallpapercave.com/wp/wp9597778.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0;
  
  animation: fadeInBackground 1s linear 8.5s forwards;
}

h1 {
  margin: 0px;
  padding: 0px;
  color: #ddd;
  font-size: min(9vw, 9rem);
  font-family: sans-serif;

}

h1 span {
   display: inline-block;
   animation: letterAnimation 1s linear forwards;
   border:2px solid black;
   border-radius: 4px;
   padding: 0.25rem;
   padding-bottom: 0;

  
}

@keyframes fadeInBackground {
  100% {
    opacity: 1;
  }
}

@keyframes letterAnimation {
  100% {
    opacity: 1;
	color: red;
	padding: 0.25rem;
	padding-bottom: 0;
	background-color: white;
    border: 2px solid red;
	border-radius: 4px;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	box-sizing: border-box;
  }
}

h1 span:nth-child(1) {
  animation-delay: 1.5s;
}

h1 span:nth-child(2) {
  animation-delay: 2.5s;
}

h1 span:nth-child(3) {
  animation-delay: 3.5s;
}

h1 span:nth-child(4) {
  animation-delay: 4.5s;
}

h1 span:nth-child(5) {
  animation-delay: 5.5s;
}

h1 span:nth-child(6) {
  animation-delay: 6.5s;
}

h1 span:nth-child(7) {
  animation-delay: 7.5s;
}



    
</style>

</body>
</html>""", width=200, height=200)

mathcatsand · December 23, 2022, 11:30am

Streamlit has its own styling, so you will not be starting from nothing when you add style. You can’t expect something will render in Streamlit as it does on an empty page. All of your html that you render will come in within its own iframe. Is it just making the background apply to the whole app that you need to correct at the moment?

murat_tasci · December 23, 2022, 12:03pm

yes, the only thing left is to apply the background to the whole screen Animation takes place only inside the small frame

mathcatsand · December 23, 2022, 4:41pm

css = '''
.stApp {
    background: url('https://wallpapercave.com/wp/wp9597778.jpg');
    background-size: cover;
    background-position: center;
}
.stApp > header {
    background-color: transparent;
}

'''

st.markdown(f'<style>{css}</style>', unsafe_allow_html=True)

Sunil_Simon · October 5, 2023, 11:19am

Am having trouble with the css in streamlit…Would be great if anyone could help out. I did all the development using my windows system and everything works when the application is launched from my laptop. Further down the lane, I copied all the files into an another system and tried launching the app in the new system. I have made sure that all the dependencies and the python version installed in the new system is the same as that in the first system. This is where the problem arises…The appliation launches well in the new system with no fault in all the functionalities. But, the css stylings are not rendered…It would be a great help if somebody could provide me with a solution

Topic		Replies	Views
St.markdown is not working properly on streamlit version 1.7.0 🎈 Using Streamlit	1	812	April 8, 2023
CSS of st.markdown 🎈 Using Streamlit python-programming	8	2241	September 11, 2023
My CSS styles is not loading in the component. I may quit 🎈 Using Streamlit css	5	676	December 29, 2023
HTML Code Works Different In Streamlit (General Problem) 🎈 Using Streamlit	4	1288	December 11, 2023
Formatting 🎈 Using Streamlit css	3	4291	February 7, 2022

HTML and CSS not rendering as expected in Streamlit Markdown

Summary

Steps to reproduce

Debug info

Related Topics

Hello there 👋🏻

Cookie settings

Strictly necessary cookies

Performance cookies

Functional cookies

Targeting cookies