Question
How to integrate bulma(css framework) to style dash app? The docs indicate use of a cdn or css file should work.
Attempt
app.py(dash)
from dash import Dash, html
app = Dash(__name__)
app.layout = html.Div(children=[
html.H1(children='Hello Dash'),
html.Div(className="primary",
children='''
Dash: A web application framework for your data.
'''),
])
if __name__ == '__main__':
app.run_server(debug=True)
bulma cdn
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.4/css/bulma.min.css">
Related
I am using Syncfusion in Blazor WebAssembly and encountering issues upon building the application on my local server. The first issue is that the Syncfusion components are not displaying properly: the calendar widget (see image) is not formatted properly. The second issue is that the widget has no functionality: i.e., the buttons are broken. This same issue occurs with all Syncfusion components.
This is how the calendar component renders in the application:
I have attached a few relevant code snippets from the project.
Program.cs [snippet]
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using Syncfusion.Blazor;
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddSyncfusionBlazor();
var app = builder.Build();
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.MapBlazorHub();
app.MapFallbackToPage("/_Host");
app.Run();
Index.razor [snippet]:
#using Syncfusion.Blazor
#using Syncfusion.Blazor.Calendars
<SfCalendar TValue="DateTime" />
Host.cshtml [snippet]
<head>
...
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
<!--Use below script reference if you are using Syncfusion.Blazor Single NuGet-->
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
<script src="_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
</head>
<component type="typeof(App)" render-mode="ServerPrerendered" />
I hypothesize that I must be missing some CSS and script import, based on the nature of the problem. I have tried adding references as recommended in Syncfusion's documentation to Host.cshtml (the project does not use index.html) but the references in <head> did not affect the application components.
I have a landing file which is in pure HTML. (landing.html)
I want the main URL of the website to be this file and the rest of the URLs to go in the React app.
For example:
example.com -> landing.html
example.com/app -> react app
example.com/login -> react app
As I said, I want the main URL to read the landing.html.
But the rest of the app should read the build version of React.
If it's possible i want it to be a part of the React app and not adding it directly in build folder. After running build it should be automaticly in build folder so basicly kinda implicitly to be a part of react app.
One more thing I dont want to convert it to jsx. 😁
How can I implement this ?
For the landing page use
var __html = require('./template.html');
var __html = require('./template.html');
var template = { __html: __html };
React.module.exports = React.createClass({
render: function() {
return(
<div dangerouslySetInnerHTML={template} />
);
}
});```
on / route and other react components use on app and login route
I researched a bit and found two solution for it.
First : Using multipage app feature in Vite.
Second: confining nginx on server for this feature. (I didn't do the configuration someone else did, but it worked)
my files in templates
- main.html
- page1.html
my code
def main():
return render_template('main.html')
html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
users
</body>
</html>
it doesn't work and gives me Not Found
The requested URL was not found on the server. If you entered the URL manually please check your spelling and try again.
You should provide the route(url) to the template in the function main() using a decorator like this:
#app.rout("your/url")
def manin()
return render_template("your_template.html")
Another thing, you should create a folder(directory) called templates, and place all your templates in it so that flask can detect them, otherwise, flask will not detect the templates, unless you tell it to look elsewhere and you do not want to bother yourself with it right now. Just put all your templates in a directory called templates that it in the same level as your app.
try this:
In main.py:
from flask import Flask, render_template
app = Flask(__name__)
app.config['SECRET_KEY'] = "YourFlaskSafetyKeyHere"
#app.route("/")
def Home():
return render_template("page1.html")
if __name__ == "__main__":
app.run(debug=True)
in page1.html:
<h1>Home Page</h1>
There you go! You just didn't satisfied the requirements of Flask
I am writing a Server Side Rendered app with Svelte/Sapper and I am having trouble using Font Awesome fonts.
I am using the following to load the font:
<script>
import Icon from "svelte-awesome";
import { faTimes } from "#fortawesome/free-solid-svg-icons/faTimes";
</script>
<Icon data={faTimes} />
The error I am seeing is:
" is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules"
Is there a solution to this?
I landed on this page looking for ways to import just the FontAwesome CSS into Svelte without any additional components or dependencies. Turns out that with Svelte this is just as simple as with plain HTML: Get the FontAwesome CSS (e.g. via package manager, CDN, or download) and add it to the HTML <head> section.
I like to install it via npm to maintain its version together with all other depencies:
npm install --save #fortawesome/fontawesome-free
After installing, just add the stylesheet (from the #fortawesome directory inside node_modules) to the <head> section of app.html.
<head>
...
<link href="./../node_modules/#fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
...
</head>
Use FontAwesome icons in your Svelte components, e.g. <i class="fa-regular fa-lightbulb">
For svelete-aweome, the import should look as follows in Sapper:
import Icon from 'svelte-awesome/components/Icon';
I am currently new to Tornado and I am trying to render my HTML page using Tornado. The issue i am having is getting Tornado to allow the css file to be applied on my html page. When i run the html alone without a web server the css file is automatically incorporated and applied. Using Tornado, the html content is fine, but the css simply refuses to apply.
I've tried using the full path of both my files through the href and tornado, also I've tried placing them outside of the .py script running tornado but i get the same errors
Python Tornado code
import tornado.web
import tornado.ioloop
port = 8080
class basicRequestHandler(tornado.web.RequestHandler):
def get(self):
self.write("Hello world!")
class staticRequestHandler(tornado.web.RequestHandler):
def get(self):
self.render("C:/Users/user/Desktop/html/Project 1/index.html")
if __name__ == "__main__":
app = tornado.web.Application([
(r"/", basicRequestHandler),
(r"/site", staticRequestHandler)
])
app.listen(port)
print(f"Listening on {port}")
tornado.ioloop.IOLoop.current().start()
This is the link inside my html code. I've tried full and relative paths(same folder) but none seem to make a difference
<link rel="stylesheet" href="C:\Users\user\Desktop\html\Project
1\styles.css" type="text/css">
<link rel="stylesheet" href="styles.css" type="text/css">
The error that appears on my chrome console is:
(1) Not allowed to load local resource:
file:///C:/Users/user/Desktop/html/Project%201/styles.css
C:\Users\user\Desktop\html\Project 1\styles.css is a file path on your system. This will not work because browsers and servers communicate through HTTP URLS.
To load the CSS file, you'll need to use its URL.
Try <link rel="stylesheet" href="/site/styles.css">. Please read the documentation of using StaticFileHandler to learn more about its usage.