I am using Flask and therefore Jinja2 to dynamically create a web page.
When I use the render_template function the resulting web pages pick up my css styles normally and do as I expect with some strange exceptions.
For example, the following css and html code is working 100% as intended:
CSS:
.intro {
font-family: monospace;
font-size: 24px;
color: #455934;
padding-top: 30px;
padding-right: 50px;
padding-bottom: 5px;
padding-left: 50px;
}
HTML:
<p class ='intro'>
Hello
</p>
However when using a ``Jinja2``` template:
<p class ='intro'>
{{title}}
</p>
The css style for this class is ignored.
This is not true for any other styles in the same css file and template, for reference the whole template looks like this and the styles for div containers, background, etc. work as intended:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='gemuese_style.css') }}">
<title>{{title}}</title>
</head>
<body>
<div class="outer">
<div class="middle">
<div class="inner">
<p class ='intro'>
{{title}}
</p>
<ul>
<li>{{result}}</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Edit:
Some testing has shown me that the style seems to work depending on the variable jinja renders. The template is rendered based on the output of different functions who generally return a list of a string and another list. The string is then used to fill in the {{title}} part where the css is failing.
For some functions it does work but I am not sure why because there is no difference in the return format.
Edit2:
Look at the difference between This rendered template and this one.
Related
1. Background:
I am new to Flask, JavaScript or web development. I am currently trying to build an interface for a project of mine, which does extract the linear area of a curve. So far so good, my python code works: It reads data from an .csv or .xlsx file and returns the area, it's slope and plots for each sample. Now I am desperately trying to put them in some kind of user interface, so you can decide which ones to plot. I recognized image-picker (github.com/rvera/image-picker) as a suitable tool for the job, so I decided to implement it into my project. For this I started to build a simple test-page with the image-picker.
2. Problem
Unfortunately, I wasn't able to achieve this. Instead of seeing a list of the image names followed by the pictures, I can only get the list. I will add screenshots of the outcomes.
3. My Code
The project structure
Both, image-picker.css and image-picker.js are taken from the image-picker github
base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="{{ url_for('static', filename = 'css/main.css') }}">
{% block head %} {% endblock %}
</head>
<body>
{% block body %} {% endblock %}
</body>
</html>
img_picker.html
{% extends 'base.html' %}
{% block head %}<title>Image Picker</title> {% endblock %}
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='image-picker.css') }}">
<script src="{{ url_for('static', filename='image-picker.js') }}" type="text/javascript"></script>
{% block body %}
<select multiple="multiple" class="image-picker show-html">
<option data-img-src='http://placekitten.com/220/200' value='1'>Cute Kitten 1</option>
<option data-img-src='http://placekitten.com/180/200' value='2'>Cute Kitten 2</option>
<option data-img-src='http://placekitten.com/130/200' value='3'>Cute Kitten 3</option>
<option data-img-src='http://placekitten.com/270/200' value='4'>Cute Kitten 4</option>
</select>
<script> $('.image-picker').imagepicker();
</script>
{% endblock %}
app.py
from flask import Flask, render_template
app = Flask(__name__)
#app.route('/')
def index():
return render_template('img_picker.html')
if __name__ == '__main__':
app.run()
main.css
body{
margin: 0;
font-family: sans-serif;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
How it looks
How it should look
(The website I took the example from: https://rvera.github.io/image-picker/)
If you need any more information, I will be glad to provide it. There has been another question regarding this problem before, but it wasn't solved.
Thanks for any help,
Carroll
I want to change the font size of a specific markdown cell in jupyter lab, and not the whole output. I will convert my project at the end into an html file.
I already tried this:
<html>
<head>
<style>
div.a {
font-size: 300%;
}
</style>
<body>
<div class="a">My text in here</div>
</body>
</head>
</html>
But this is not changing my text size after I run my cell under Markdown.
I also don't want to use in order to not give a automatic number to that particular text.
Thanks in advance
I see you want to change the font-size:
<html>
<head>
<style type="text/css">
.a{ //for class use .(class-name)
font-size: 300%;
}
</style>
</head> // all the styling is to be done inside the head tag.
<body>
<div class="a">My text in here</div>
</body>
</html>
I want to create multipleselecetfild that each selection referin to each choice appears below the image.
I used the django MultiSelectField to create a form to have multiple select options.
These are my files:
models.py
class Profile(models.Model):
cat_choices = (
('Internships', 'Internships'),
('Scholarships', 'Scholarships'),
('EntranceExams', 'EntranceExams'),
)
category=MultiSelectField(choices=cat_choices,default='none')
profile.html
<!DOCTYPE html>
<html>
<body>
<style>
div.item {
vertical-align: top;
display: inline-block;
margin-right: 50px;
text-align: center;
width: 120px;
}
img {
background-color: grey;
}
.caption {
display: block;
}
</style>
<div class="item">
<img src="internship.png">
<span class="caption"><input type="checkbox" name="Internship" value="Internship"></span>
</div>
<div class="item">
<img src="jobs.png">
<span class="caption"><input type="checkbox" name="Jobs" value="Jobs"></span>
</div>
<div class="item">
<img src="scholarship.png">
<span class="caption"><input type="checkbox" name="Scholarship" value="Scholarship"></span>
</body>
</html>
I created a form called profile_form with the category field.
In html, I wanted my form to appear with an image on the top and just a check button below the image, with the check button refering to each cat_choices in the category. Something like this
!In the image I used html to display it.
How do I write this html page in django such that each check button refering to each choice appears below the image?
I am working through Learn Python The Hard Way, and am currently working through exercise 51. In it, the student is asked to try building out some basic web applications using the web.py framework. The first study drill is to improve the quality of the HTML layouts so that the applications are built on well-formatted pages. I am looking to make a template layout that applies to all pages in the application, and leverages a CSS stylesheet to provide the formatting. I would like for the CSS formatting to be external, rather than within the HTML file. For some reason, no matter how I format the path to 'main_layout.css' I cannot get the formatting changes to take effect. I have tried the path with a leading '/' and without the leading '/'. I have tried moving the CSS file into another folder (the root folder, and the templates folder). I tried emptying my browser cache in case that was causing in issue. I tried accessing the 'static' directory and the 'main_layout.css' file itself directly through my browser, which I was able to do in both cases--the files is in there, but I can't get it to accept the formatting markup from 'main_layout.css'. I googled this issue, checked the google group for web.py, and searched stackoverflow--in all cases, the answers were related to the path to the css file, which I believe I have fully explored and attempted to fix to no avail.I have tried all suggestions I could find on the web, and I am stumped. My code is as follows:
/bin
app.py
/ex51
/static
main_layout.css
/templates
hello_form.html
index.html
layout.html
/tests
app.py is written as follows:
import web
urls = (
'/hello', 'Index'
)
app = web.application(urls, globals())
render = web.template.render('templates/', base="layout")
class Index(object):
def GET(self):
return render.hello_form()
def POST(self):
form = web.input(name="Nobody", greet="Hello")
greeting = "%s, %s" % (form.greet, form.name)
return render.index(greeting = greeting)
if __name__ == "__main__":
app.run()
index.html written as follows:
$def with (greeting)
$if greeting:
I just wanted to say <em style="color: green; font-size: 2em;">$greeting</em>
$else:
<em>Hello</em>, world!
hello_form.html written as follows:
<h1>Fill out this form</h1>
<form action="/hello" method="POST">
A Greeting: <input type="text" name="greet">
<br/>
Your Name: <input type="text" name="name">
<br/>
<input type="submit">
</form>
main_layout.css written as follows:
html, body {
height: 100%;
}
.container {
width:800px;
}
.container #body_container {
margin: 10px auto;
padding-bottom: 50px;
min-height: 100%;
text-align: center;
overflow: auto;
}
.container #footer_container {
margin-top: -50px;
height: 50px;
}
and layout.html:
$def with (content)
<html>
<head>
<link rel="stylesheet" type="text/css" href="/static/main_layout.css" />
<title>This is My Page</title>
</head>
<body>
<div class="container" id="body_container">
$:content
</div>
<div class="container" id="footer_container">
Hello World
</div>
</body>
</html>
Thanks in advance for your help.
Edit: One additional bit of information--I am running this script from the PowerShell of my Windows 7 PC, and accessing it at http://localhost:8080/hello through Google Chrome.
You are commenting out the CSS file using a octothorp (#) which is incorrect for a CSS document (but correct for Python, which is where the confusion is). Use /* to comment out your code in a CSS document. Like this:
.container /*body_container*/ {
margin: 10px auto;
padding-bottom: 50px;
min-height: 100%;
text-align: center;
overflow: auto;
}
My code:
<html>
<style type="text/css">
h1 {
position: absolute;
top: 5px;
left: 200px;
}
form #Edit1 {
position: absolute;
top: 37px;
left: 410px;
}
form #Edit2 {
position: absolute;
top: 37px;
left: 840px;
}
</style>
<font size="4" face="arial" color="#0000FF">
<h1>XML Search</h1>
</font>
<br/>
<br/>
<Form Action ="/search/" Method ="POST">
<div id="Edit1">
<INPUT TYPE = 'VARCHAR' name ='word' VALUE ="" size = "50">
</div>
<div id="Edit2">
<INPUT TYPE = "Submit" VALUE = "Search">
</div>
<br/>
<hr/>
{% csrf_token %}
</Form>
{% if list1 %}
<br/>
<head>
#!/usr/bin/python
# make a horizontal bar chart
from pylab import *
val = 3+10*rand(5) # the bar lengths
pos = arange(5)+.5 # the bar centers on the x axis
figure(1)
barh(pos,val, align='center')
{% for l in list1 %}
xticks(pos, ({{l.file_name}},))
{% endfor %}
xlabel('Performance')
title('How fast do you want to go today?')
grid(True)
show()
</head>
<body>
<div id="chart_div" style="width: 1000px; height: 500px;"></div>
</body>
{% endif %}
</html>
I have created an app in Django called 'search' which searches the keywords entered by the user in 10xml documents and maintain the frequency of their occurrence for each file. When user enters the words he gets the results as graphs. This above mentioned HTML code file is redirected from views.py file. On running the app on the server, the Python code employed alongwith the HTML code, gets printed as it is when user enters the keywords. How can I display the charts created in pylab in HTML page?
I have another idea, I used up Google charts earlier and they are working fine. The only problem with them is that they will not work if there is no Internet, and this will be a drawback in may app. Is there any way out to solve this, I mean how can we use Google charts statically? If anyone of you want you want me to upload my Google charts code, I can do that.
You need to use the FigureCanvasAgg backend and return a HttpResponse. See for instance:
[Django with Matplotlib][1]
How to use Matplotlib in Django?