I'm starting learning flask and I'm planning on makin a sorting algorithm visualizer using flask and I'm tryin to represent the elements of the array as bars (the height of the bars is = to the value of each element in the array). I'm thinking to use the display: block but it does not appear on the page. Pls help me or suggest anything if this is possible
html file:
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
<link rel="stylesheet" href="{{ url_for('static', filename='design.css') }}">
</head>
<body>
<div class="bar">
<p>test</p>
</div>
</body>
</html>
css file:
.bar{
display: inline-block;
height: 120px;
width: 5px;
background-color: red;
color: white;
}
this what only shows on my page. other css property works well this display: bar was the only problem
Normally this is an issue with browser caching. If you did not use a file and added it directly to <head> it should work
<head>
<style>
.bar{
display: inline-block; /*You want block or inline-block?*/
height: 120px;
width: 5px;
background-color: red;
color: white;
}
</style>
</head>
If you really want to use the css file, use versioning in the url:
/static/design.css/?v=1 next time /static/design.css/?v=2
But it becomes tedious. You can add a random variable like this:
import uuid
v = str(uuid.uuid4())
# url_for('static', filename='design.css', v=v)
Please clarify your answer using a screenshot of what is happening now
I'm trying to create my own website on Django, but some problems stop me and I can't solve them myself.
I want to create a sidebar. I found a website with css and HTML code for it.
style.css:
#import url('https://fonts.googleapis.com/css?family=Montserrat:600|Open+Sans:600&display=swap');
*{
margin: 0;
padding: 0;
text-decoration: none;
}
.sidebar{
position: fixed;
width: 240px;
left: -240px;
height: 100%;
background: #1e1e1e;
transition: all .5s ease;
}
.sidebar header{
font-size: 28px;
color: white;
line-height: 70px;
text-align: center;
background: #1b1b1b;
user-select: none;
font-family: 'Montserrat', sans-serif;
}
.sidebar a{
display: block;
height: 65px;
width: 100%;
color: white;
line-height: 65px;
padding-left: 30px;
box-sizing: border-box;
border-bottom: 1px solid black;
border-top: 1px solid rgba(255,255,255,.1);
border-left: 5px solid transparent;
font-family: 'Open Sans', sans-serif;
transition: all .5s ease;
}
a.active,a:hover{
border-left: 5px solid #b93632;
color: #b93632;
}
.sidebar a i{
font-size: 23px;
margin-right: 16px;
}
.sidebar a span{
letter-spacing: 1px;
text-transform: uppercase;
}
#check{
display: none;
}
label #btn,label #cancel{
position: absolute;
cursor: pointer;
color: white;
border-radius: 5px;
border: 1px solid #262626;
margin: 15px 30px;
font-size: 29px;
background: #262626;
height: 45px;
width: 45px;
text-align: center;
line-height: 45px;
transition: all .5s ease;
}
label #cancel{
opacity: 0;
visibility: hidden;
}
#check:checked ~ .sidebar{
left: 0;
}
#check:checked ~ label #btn{
margin-left: 245px;
opacity: 0;
visibility: hidden;
}
#check:checked ~ label #cancel{
margin-left: 245px;
opacity: 1;
visibility: visible;
}
#media(max-width : 860px){
.sidebar{
height: auto;
width: 70px;
left: 0;
margin: 100px 0;
}
header,#btn,#cancel{
display: none;
}
span{
position: absolute;
margin-left: 23px;
opacity: 0;
visibility: hidden;
}
.sidebar a{
height: 60px;
}
.sidebar a i{
margin-left: -10px;
}
a:hover {
width: 200px;
background: inherit;
}
.sidebar a:hover span{
opacity: 1;
visibility: visible;
}
}
sidebar.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Responsive Sidebar Menu</title>
<link rel="stylesheet" href='style.css'/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<input type="checkbox" id="check">
<label for="check">
<i class="fas fa-bars" id="btn"></i>
<i class="fas fa-times" id="cancel"></i>
</label>
<div class="sidebar">
<header>My Menu</header>
<a href="#" class="active">
<i class="fas fa-qrcode"></i>
<span>Dashboard</span>
</a>
<a href="#">
<i class="fas fa-link"></i>
<span>Shortcuts</span>
</a>
<a href="#">
<i class="fas fa-stream"></i>
<span>Overview</span>
</a>
<a href="#">
<i class="fas fa-calendar"></i>
<span>Events</span>
</a>
<a href="#">
<i class="far fa-question-circle"></i>
<span>About</span>
</a>
<a href="#">
<i class="fas fa-sliders-h"></i>
<span>Services</span>
</a>
<a href="#">
<i class="far fa-envelope"></i>
<span>Contact</span>
</a>
</div>
</body>
</html>
All of these works if I start it in any snippet, or if I just run sidebar.html from pycharm in google, but when I start my site it doesn't work and gives an error: Not Found: /style.css/
Both files are on the same directory.
Easy fix, but you will need to dig into Django a bit more.
First, this tag <link rel="stylesheet" href=style.css/> will never work. The tag is written wrong on a few levels. The big problem is that the location is relative, the use of style.css is assumed to be on the same directory level as what ever page/script/etc is being called. The problem is that wsgi.py or similar file is actually the "root" that is "running" the site and has no idea where "style.css" exists and also deos not care.
Styles, image, js, etc are all stored as static assets in Django. This folder is "served" using a static tag that will transform to the correct path per your configuration for local dev and production. Take a look here: https://docs.djangoproject.com/en/3.1/howto/static-files/
I will not explain all the nuance, the Django site does a better job. Instead I will point out how Django is different from static sites or something like PHP. Django is an application running in the CGI (WSGI), there is only one "route" on the server so to speak, all data is served from this one file. PHP can and typically does serve data in a file+directory manner. In PHP/static scenario the location of files is stable compared to Django. In Django the page, url, and the way data is served all come from one point. That means the relationship to static files will be different and not something you can or should control.
Django does not want you to ever serve static files through the CGI (WSGI), that is a waste of CPU and resources and is slow for static. So they have a static system. When running locally with the configuration set up correctly and DEBUG=True then the static keyword will transform to the necessary local path in conjunction with your configuration.
When in production it is assumed that a CDN is used, in that case the static keyword is replaced with the path (URL) to the CDN static files.
The approach Django uses is much more mature than say, Wordpress where use of a CDN can be tricky (I have written custom CDNs for WP many times, not fun).
Walk through the link above, set up your configuration correctly and follow the rules. Django is very interested in your following of the rules, Deviation will only cause pain. I have been primarily a Django dev for almost 10 years now. The problem you ran into got me real good in the beginning, but now CDN and static file management is second nature and definitely more productive than other less mature systems.
Set static root on your 'settings.py'.
You're gonna want to change <link rel="stylesheet" href=style.css/> to <link rel="stylesheet" href="style.css"/>. Also, the path it is trying to find your style.css file in is like this: (whatever path to your sidebar.html)/sidebar.html/style.css. I doubt that it is located there. If it is located in the same directory as your sidebar.html file, try <link rel="stylesheet" href="./style.css"/>
I have a variable defined as follows:
item_title="Title"
And I want to put this value into the following string:
html_desc="""
<![CDATA[
<head>
<style>
body {
font-size: 25px;
border-style: solid;
border-width: 5px;
border-color: green;
border-radius: 10px;
background-color: #FFFFC2;
padding: 15px;
}
li {
color: #F7270F;
font-weight: bold;
}
</style>
</head>
<body>
<h1 align="center">Auctions for Week of 08-01-2018</h1>
<p>You are bidding on the following item:</p>
<ul><li>"{}".format(item_title)</li></ul>
<p>Condition is pack fresh unless otherwise indicated. Please review the pictures carefully and if you have any questions about something specific, ask.</p>
<p><b>Shipping:</b> Shipping will be calculated based on buyer location. No premiums are charged. Cards are mailed in an 8x5 bubble mailer and shipped First Class mail unless the price exceeds $50, at which point they will be shipped Priority at no additional cost to the buyer. If you win multiple auctions, please wait for an invoice to be sent.</p>
</body>
]]>"""
My attempt here is broken. I've also tried using {} and the .format at the end after the final three """ but that isn't working either.
Any assistance?
you can not use format because you used these {} brackets in style section, but you can do it easily by Plus Operator (+) like:-
html_desc="""
<![CDATA[
<head>
<style>
body {
font-size: 25px;
border-style: solid;
border-width: 5px;
border-color: green;
border-radius: 10px;
background-color: #FFFFC2;
padding: 15px;
}
li {
color: #F7270F;
font-weight: bold;
}
</style>
</head>
<body>
<h1 align="center">Auctions for Week of 08-01-2018</h1>
<p>You are bidding on the following item:</p>
<ul><li>""" + item_title + """</li></ul>
<p>Condition is pack fresh unless otherwise indicated. Please review the pictures
carefully and if you have any questions about something specific, ask.</p>
<p><b>Shipping:</b> Shipping will be calculated based on buyer location. No premiums are charged. Cards are mailed in an 8x5 bubble mailer and shipped First Class mail unless the price exceeds $50, at which point they will be shipped Priority at no additional cost to the buyer. If you win multiple auctions, please wait for an invoice to be sent.</p>
</body>
]]>"""
Hoping someone may have solved this problem. Haven't seen anyone with it on Google.
I'm using xhtml2pdf in Python, trying to generate a simple document with a header, footer and my content is blocks of text with titles. I'd like to have a border around each piece of content but instead I get borders around each child element instead.
Here's my HTML
#page {
size: letter;
border: 0;
#frame header_frame {
-pdf-frame-content: header;
border: 0pt solid white;
left: .75in;
width: 7in;
top: .5in;
height: 1.5in;
}
#frame content_frame {
border: 0pt solid white;
left: .75in;
width: 7in;
top: 1.5in;
height: 7.5in;
}
#frame footer_frame {
-pdf-frame-content: footer;
border: 0pt solid white;
left: .75in;
width: 7in;
top: 9.5in;
height: 1in;
}
}
h1 {
padding-top: 5pt;
}
.desc {
margin-top: 3px;
margin-bottom: 3px;
padding: 3px;
border: 1px solid blue;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>TEST TEST TEST</title>
</head>
<body>
<div id="header">
<h1>HEADER</h1>
</div>
<div id="footer">
FOOTER
</div>
<div class="desc">
<div class="title">TITLE OF ARTICLE</div>
<span>TEST 2</span>
<div>TEST 3</div>
<table>
<tr>
<td>Test4</td>
<td>Test 5</td>
</tr>
</table>
</div>
</body>
</html>
I'm just running the xhtml2pdf command line tool at the moment so there's no python to show. One thing I did notice when I run it in debug mode it shows "xhtml = false" even though I have an XHTML DTD. I'm not sure if this would make a difference.
Here's what I see in the browser and roughly what I expect the pdf to look like (ignoring the footer location of course):
Instead I get:
EDIT: I figured out that xhtml is an option to pass but passing it fails unless one has an old version of html5lib installed. Looks like the answer to my question is this library is not being actively maintained and I need to find a new solution :-/
this is my html code and i need to select font size, bgcolor which is there in nonscript.
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
<!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
<noscript>
<div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
Your web browser must have JavaScript enabled
in order for this application to display correctly.
</div>
</noscript>
can any budy help with this.
I am using python as my scriptin language.
you just want to grab the text? you can look at something like beautiful soup (which i'm not familiar with), or use a simple regex
import re
m = re.compile(r'background-color: (\w+);',re.I)
result = m.search(text)
if result:
bgc = result.group(1)