HTML and CSS not rendering as expected in Streamlit Markdown

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:

html and css view:

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?

I tried the suggestions it didn’t work.

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

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.

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

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)

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

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.

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.'

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)

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?

1 Like

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

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)