Streamlit not loding html with external css & js into app

Pravin_Maske · June 23, 2023, 12:41pm

I have a folder structure for my app like this

app.py
index.html
css/
- style.css
font/
- font_file.ttf
img/
- image.jpg

and following is my code to in app.py

def html():
# Read the index.html file
with open(‘index.html’, ‘r’) as file:
html_content = file.read()

# Display the HTML content
st.markdown(html_content, unsafe_allow_html=True)

if _name == ‘_main’
st.set_page_config(page_title=“Namkrarn” ,page_icon=“:shark”,#EP: hod dd they find a symbol?
layout=“wide”,initial_sidebar_state=“collapsed”,)
html()

Following is the screenshot of my output for the same

I will appreciate if some one point me into right direction for the above

index.html

<head>
  <title>Naamkaram</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="css/style.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
 <nav class="navbar navbar-expand-md navbar-light bg-white shadow fixed-top">
  <!-- Brand -->
  <a class="navbar-brand" href="#"><img src = "img/Naamkaram.png" class = "img-fluid"></a>

  <!-- Toggler/collapsibe Button -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- Navbar links -->
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Login/Signup</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">
			<select class = "form-control">
				<option>EN</option>
				<option>MR</option>
			</select>
		</a>
      </li>
    </ul>
  </div>
</nav> 
<div class="container-fluid mt-5 pt-4 px-0">
  <section class = "home bg px-4 py-5" id = "home">
	<h1 class = "cust-font text-white">Discover the Perfect Name Unleash the <br> Power of AI for Naming Your Child</h1>
	
	<a href = "#name"><button class = "btn btn-down" type = "button"><span>Get Started</span></button></a>
  </section>
  
  <section class = "name bg1 px-4 py-5" id = "name">
	<div class = "container pt-5 mt-5 px-0">
		<div class = "col-md-8 mx-auto pt-5 px-0">
			<div class = "card">
				<div class = "card-body">
					<h3 class = "cust-font text-center">Lets Generate Name</h3>
					
					<div class = "row">
						<div class = "col-md-6 col-12 mb-4">
							<label>Religion</label>
							<select class = "form-control">
								<option>Select Religion</option>
								<option>Hindu</option>
								<option>Sikh</option>
								<option>Jain</option>
								<option>Christian</option>
							</select>
						</div>
						<!--/.col-->
						<div class = "col-md-6 col-12 mb-4">
							<img src = "img/boy.png" class = "img-fluid mr-2">
							<input type="radio" id="test1" name="radio-group" checked>
							<label for="test1" class = "mr-3">Boy</label>
							
							<img src = "img/girl.png" class = "img-fluid mr-2">
							<input type="radio" id="test2" name="radio-group">
							<label for="test2">Girl</label>
						</div>
						<!--/.col-->
						<div class = "col-md-6 col-12 mb-4">
							<input type="radio" id="test3" name="radio-group1" checked>
							<label for="test3" class = "mr-3">Parents Name</label>
							<div class = "col-12 px-0 mb-3">
								<label>Father Name</label>
								<input type = "text" class = "form-control" placeholder = "Type father’s Name Here">
							</div>
							<div class = "col-12 px-0">
								<label>Mother Name</label>
								<input type = "text" class = "form-control" placeholder = "Type mother’s Name Here">
							</div>
						</div>
						<!--/.col-->
						
						<div class = "col-md-6 col-12 mb-4">
							<input type="radio" id="test4" name="radio-group1" checked>
							<label for="test" class = "mr-3">First Letter Of Name</label>
							<div class = "col-12 px-0">
								<label>1st Letter Of Name</label>
								<input type = "text" class = "form-control" placeholder = "Type 1st Letter Of Name">
							</div>
						</div>
						<!--/.col-->
						<div class = "col-12 text-center my-4">
							<a href = "#gen"><button class = "btn btn-generate px-5 bg-white shadow-sm" type = "button"><span>Generate</span></button></a>
						</div>
						<!--/.col-->
					</div>
					<!--/.row-->
				</div>
			</div>
		</div>
	</div>
  </section>
  
  <section class = "gen bg2 px-4 py-5" id = "gen">
	<div class = "container pt-5 px-0">
		<div class = "col-md-12 px-0 mx-auto">
			<h1 class = "cust-font text-center text-white">Names Generated</h1>
			
			<div class = "table-responsive">
				<table class = "table table-bordered">
					<thead>
						<tr>
							<th>Name</th>
							<th>Meanings</th>
							<th>Zodiac</th>
							<th>Action</th>
							<th>Likes</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>Kartik</td>
							<td>Lorem ispum </td>
							<td>Libra</td>
							<td><button class = "btn btn-know btn-sm" type = "button" data-toggle="modal" data-target="#myModal">Know More</button></td>
							<td>3.5k <i class="fa fa-thumbs-up ml-2" style = "color:#FF0082;"></i></td>
						</tr>
						<tr>
							<td>Aryan</td>
							<td>Lorem ispum </td>
							<td>Aquarius</td>
							<td><button class = "btn btn-know btn-sm" type = "button">Know More</button></td>
							<td>8.2k <i class="fa fa-thumbs-up ml-2" style = "color:#FF0082;"></i></td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class = "col-12 text-center my-5">
				<button class = "btn btn-generate px-5 bg-white shadow-sm" type = "button" data-toggle="modal" data-target="#myModal1"><span>Generate More</span></button>
			</div>
			<!--/.col-->
		</div>
	</div>
  </section>
  
  
  <!-- The Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body md-bg">
		<div class = "row">
			<div class = "col-6">
				<h1 class="modal-title text-white cust-font">Naamkaram</h1>
			</div>
			<div class = "col-6">
				<button type="button" class="close" data-dismiss="modal">&times;</button>
			</div>
			<div class = "col-12 my-5">
				<p class = "mb-5" style = "font-size:80%;color:#9747FF;">Name Card</p>
				<h4 class = "mb-4">Name : Kartik</h4>
				<p><b>Meaning</b> : is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,</p>
				<p><b>Zodiac Sign</b> : Virgo</p>
				<p><b>Tags </b> : Peaceful, Loving, Caring</p>
				<p class = "mb-5 pb-5"><b>Cast</b> : Hindu, Jain, Maratha </p>
			</div>
			
			<div class = "col-12 text-right">
				<i class = "fa fa-share text-white mr-3"></i>
				<i class = "fa fa-download text-white"></i>
			</div>
		</div>
		<!--/.row-->
      </div>
    </div>
  </div>
</div>

<div class="modal" id="myModal1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
	 <div class="modal-header" style = "background : #9747ff">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body" style = "background : #9747ff">
		<div class = "row">
			<div class = "col-md-6 col-12 text-center border-right mb-4">
				<h1 class = "cust-font text-white text-center mb-4">Free</h1>
				<p class = "text-white text-left"><i class = "fa fa-star mr-2"></i> 2 Names as per day</p>
				<p class = "text-white text-left mb-5"><i class = "fa fa-star mr-2"></i> 1 Name extra (Bonus for 1st time users)</p>
				<button class = "btn btn-price w-100" type = "button">Free Clamed</button>
			</div>
			<!--/.col-->
			<div class = "col-md-6 col-12 text-center border-right">
				<h1 class = "cust-font text-white text-center mb-4">Premium</h1>
				<p class = "text-white text-left mb-4 pb-3"><i class = "fa fa-star mr-2"></i> Unlimited names per day</p>
				<button class = "btn btn-price w-100 mt-5" type = "button">Free Clamed</button>
			</div>
			<!--/.col-->
		</div>
		<!--/.row-->
      </div>
    </div>
  </div>
</div>


</div>

</body>
</html> 
type or paste code here

blackary · June 23, 2023, 1:59pm

There doesn’t seem to be anything explicitly wrong with your code – could you share more about the contents of index.html?

This script works fine, for example:

import streamlit as st

HTML_STRING = """
<html>
<body>
<h1 style="color:blue;">This is a Blue Heading</h1>
<p style="color:red;">This is a red paragraph.</p>
</body>
</html>
"""

st.markdown(HTML_STRING, unsafe_allow_html=True)

Also, when you paste code snippets, could you please paste them as code blocks (like the one above)? Otherwise they are very hard to read and test.

Pravin_Maske · June 23, 2023, 2:14pm

I have added index.html content into my question

blackary · June 23, 2023, 2:26pm

Thanks! That’s helpful. I think the basic reason it’s not working well is that you have a very complex page that you’re trying to embed, and it’s not playing well with the streamlit layout when embedded. My recommendations:

Since what you’re trying to embed appears to basically be a form, just rebuild it in streamlit with streamlit widgets. This is my strong recommendation, as otherwise you won’t be able to actually interact with the data from the form from within your app.
If you absolutely must use this html/js/css embedded, it works slightly better if you use the components API to embed the html.

from pathlib import Path
from streamlit.components.v1 import html

HTML_STRING = Path("index.html").read_text()

html(HTML_STRING, width=700, height=2000, scrolling=True)

It doesn’t work well, but it is better. Again, though, option 1 is my strong recommendation.

Pravin_Maske · July 7, 2023, 1:06pm

Thanks & sorry for the late reply
I am able to resolve the issue with stream lit

system · July 17, 2023, 9:13pm

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
My CSS styles is not loading in the component. I may quit 🎈 Using Streamlit css	5	737	December 29, 2023
Display an html file in streamlit? 🎈 Using Streamlit	5	1441	December 1, 2023
HTML and CSS not rendering as expected in Streamlit Markdown 🎈 Using Streamlit	15	3334	October 5, 2023
Can't import local css and local jss in streamlit.v1.components.html 🧩 Custom Components	2	2585	July 26, 2021
Want to know how to embed my html code in the streamlit currently facing alignment issue and responsiveness of the webpage with the streamlit 🎈 Using Streamlit html	1	278	January 3, 2024

Streamlit not loding html with external css & js into app

Related Topics

Hello there 👋🏻

Cookie settings

Strictly necessary cookies

Performance cookies

Functional cookies

Targeting cookies