I currently have a variable that contains a string HTML which resembles this
myvar = "<p style="-qt-block-indent: 0; text-indent: 0px; margin: 18px 0px 12px 0px;"><span style="font-size: xx-large; font-weight: 600; color: #5e9ca0;"> ..."
I am passing this string to my template like so
return render(request, "rendered.html", {
'result': myvar,
})
In the template I am simply doing
{{myvar}}
This shows me on the screen the exact html as text but not rendered. When I investigated the source this is what i got
<p style="-qt-block-indent: 0; text-indent: 0px; margin: 18px 0px 12px 0px;"><span style ...
while I was suppose to get
<p style="-qt-block-indent: 0; text-indent: 0px; margin: 18px 0px 12px 0px;"><span style="font-size: xx-large; font-weight: 600; color: #5e9ca0;">
Any solution on how I can fix this issue ?
What is happening ?
Django by default is escaping your html thinking that it might be harmful hence escaping it by default.
Since you need to NOT escape it. Wrap your variable within autoescape filter
{% autoescape off %}
{{ myvar}}
{% endautoescape %}
Related
Below I have provided a minimum working example of my Flask app that uses dataTable.JS to modify an existing HTML table. In cross-comparing with current examples online, I think this is due to required libraries not being loaded properly and/or that it cannot find the data.
Guidance is greatly appreciated!
HTML (base.html)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.11.5/af-2.3.7/b-2.2.2/fc-4.0.2/fh-3.2.2/sc-2.0.5/sl-1.3.4/datatables.min.css"/>
</head>
<body>
<header>
<div class="container">
<h1 class="logo"></h1>
<strong><nav>
<ul class="menu">
<li>Home</li>
<li>Entity Map</li>
</ul>
</nav></strong>
<div class = "logoimg">
<img src="{{ url_for('static',filename='images/GENERIC_PDE_PageCard.png') }}" width="10%">
</div>
</div>
</header>
<div class="container">
{% block content %}
{% endblock %}
</div>
<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.11.5/af-2.3.7/b-2.2.2/fc-4.0.2/fh-3.2.2/sc-2.0.5/sl-1.3.4/datatables.min.js"></script>
{% block scripts %}{% endblock %}
</body>
</html>
HTML(home.html)
{% extends "base.html" %}
{% block content %}
<div class = "home">
<h3>OCFY Entity Database</h3>
<h4>Purpose</h4>
<p>Purpose This application is designed for performing custom queries to a database containing information about private and non-public entities who are serving school-aged children and youth in the Commonwealth of Pennsylvania. Sites in this database include private or non-public licensed schools, as well as non-public entities such as residential and juvenile justice institutions.</p>
<h4>How to Search</h4>
<p>The database provides information at the site-level, as well as by several higher-order aggregates, including region, county, city, type of service, PDE Educational Entity and DHS Entity.
Use the drop-down filters within to perform a custom query that automatically displays in the table on the next tab. Selecting one or more values fromm the filters will automatically remove irrelevant values from the rest of the filters. You can also use the filters in any order. They will still show only relevant options.
The search function at the top right of the table accepts words and/or whole numbers. The search function looks across all columns for all entities in the database and displays every entity with a column containing the number and/or word that was typed.
Use the first drop down box to select multiple fields from the database. Your choices will be displayed automatically in the table. The application defaults to showing several key fields. Use backspace within the search box to remove fields from the table.</p>
</div>
<br>
<div class = "homecontent">
<div class = "sidebar">
<h4>Select Fields from Database</h4>
</div>
<div class = "tablecontainer">
<table id="entity_table" class="table table-striped">
<tr>
<th>DHS Entity Name</th>
<th>DHS Legal Name</th>
<th>Full Address</th>
</tr>
<tr>
<td>Test1</td>
<td>Test2</td>
<td>Test3</td>
</tr>
<tr>
<td>Test1</td>
<td>Test2</td>
<td>Test3</td>
</tr>
<tr>
<td>Test1</td>
<td>Test2</td>
<td>Test3</td>
</tr>
</table>
</div>
</div>
{% endblock %}
{% block scripts %}
<script>
$(document).ready(function () {
$('#entity_table').dataTable();
});
</script>
{% endblock %}
CSS (main.css)
body {
margin: 0;
padding: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #444;
}
/*
* Formatting the header area
*/
header {
box-shadow: 3px 5px 3px #d0d1d3; /* offset x, offset y, blur radius */
background-color: #002060;
height: 90px;
width: 100%;
opacity: .9;
margin-bottom: 5px;
}
div.container {
scroll-behavior: auto;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
div.logoimg{
display: flex;
justify-content: left;
align-items: center;
}
/*
* Formatting the container contents
*/
.container {
width: 1200px;
margin: 0 auto;
}
div.homecontent{
width: 1200px;
}
div.tablecontainer {
float: right;
width: 850px;
background-color: #ffffff;
}
div.sidebar {
float: left;
box-shadow: 3px 5px 3px #d0d1d3;
text-align: center;
width: 300px;
height: 500px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
background-color: #F3F4F5;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
div.home {
box-shadow: 3px 5px 3px #d0d1d3;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
background-color: #F3F4F5;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
div.map {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
background-color: #F3F4F5;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
h2 {
font-size: 3em;
margin-top: 40px;
text-align: center;
letter-spacing: -2px;
}
h3 {
font-size: 1.7em;
font-weight: 100;
margin-top: 30px;
text-align: center;
letter-spacing: -1px;
color: #999;
}
.menu {
float: right;
margin-top: 8px;
}
.menu li {
display: inline;
}
.menu li + li {
margin-left: 35px;
}
.menu li a {
color: #fff;
text-decoration: none;
}
App:
from flask import Flask, render_template
ocyf = Flask(__name__)
#ocyf.route('/')
def home():
return render_template("home.html")
#ocyf.route('/map/')
def map():
return render_template("map.html")
if __name__ == '__main__':
ocyf.run(debug=True)
You must use thead and tbody tags on your table.
<table id="entity_table" class="table table-striped">
<thead>
<tr>
<th>DHS Entity Name</th>
<th>DHS Legal Name</th>
<th>Full Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>Test1</td>
<td>Test2</td>
<td>Test3</td>
</tr>
<tr>
<td>Test1</td>
<td>Test2</td>
<td>Test3</td>
</tr>
<tr>
<td>Test1</td>
<td>Test2</td>
<td>Test3</td>
</tr>
</tbody>
</table>
I am trying to set up a cookie policy pop-up on site.
I followed an online tutorial to the letter (I thought) but it doesn't work.
The banner shows up as expected, but on clicking accept, the page seems to refresh but no cookie is set and the banner is still there.
I have looked through the tutorial and all seems to be as he typed. Maybe someone could suggest what could be wrong.
The styles were placed in the css file, but I think the issue must be with the php. I have looked for alternative codes but they are so different I am not sure they would work with this method.
I wonder whether it has something to do with the isset commands.
Also, is there a way to ensure that when the cookie is set and is acknowledged that you stay on the same page rather than going to the root directory?
This is on the top of the html code i.e. before doctype
if (isset($_GET['accept-cookies'])) {
setcookie('accept-cookies', 'true', time() + 31557600);
header('Location: ./');
}
?>
This is the section with the banner (I like the way it looks so prefer not to change the style codes)
if (!isset($_COOKIE['accept-cookies'])) {
?>
<div class="cookie-banner">
<div class="cookie-container">
<p style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 500; font-size: medium;">We use cookies to track usage and preferences. By using this website we will assume that you consent to their use as per our <u>Privacy and Cookie Policy</u>.</p>
<p style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 600; font-size: medium;">Okay</p>
</div>
</div>
<?php
}
?>
Just in case you need it, here are the css parts
background-color: #abd1ff;
padding: 5px 10px;
border-radius: 5px;
display: inline-block;
border: 2px solid #4a6894;
border-bottom: 2px solid #4a6894;
}
.cookie-banner {
background: #6c9bd3;
position: fixed;
top: 0;
left: 0;
width: 98%;
}
.cookie-banner .cookie-container {
margin: 0 auto;
width: 70%;
padding-bottom: 10px;
color: #1f2b3a;
padding: 15px;
}
I was going to add a slide down function, but when I added for it not to display initially in the css code, the banner disappeared even when the js file was referred to with the slide down code.
Any help on what I could add to make it work, what is missing, would be great.
THANK YOU!!!!
No error messages have been seen. Banner just won't disappear and cookie is not set.
I'm currently using Flask and I want to have a "Submit" button that will POST the data in a form to Python once the button is pushed.
MY text box looks like this:
<form method="POST"> <style>
textarea {
width: 100%;
height: 200px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
resize: none;
}
</style>
My button looks like this:
<button type="submit"></button>
My run.py looks like this:
#app.route('/', methods=["POST"])
def some_function():
// do stuff
EDIT: I can't get the POST method to work. The button appears, and even when it is pressed, it does nothing.
you have your answer, but to others who will read this question later, and because you have so many mistakes in your pasted code that isn't going to make it any usable for others:
you should place the button inside the form, so your form would look like this:
<style>
textarea {
width: 100%;
height: 200px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
resize: none;
}
</style>
<form method="POST">
<textarea name="textbox"></textarea>
<button type="submit" name="submit">Submit</button>
</form>
so you have a textarea and a button to send the form.
now, in your run.py:
#app.route('/', methods=["POST"])
def some_function():
text = request.form.get('textbox')
now, you can do whatever you like to text.
Ok, I'm trying to tinker with my navigation menu. I want something like this website:
http://aleksfaure.com/
He has a single image (logo) centered with 2 menu links on either side. I've tried a couple of different things, including just using my logo as an image centered at the top, in between the menu. No dice.
Here's the relevant HTML and CSS I have with my current nav menu. I'm still kind of a intermediate beginner at this.
HTML
<nav role="navigation">
<ul id="nav">
<li>Home</li>
<li>About Me</li>
<ul id="nav-right" style="float:right;">
<li>Portfolio</li>
<li>Contact</li> </ul>
</ul></nav>
CSS
#header nav {
position: relative;
width: 700px;
height: 163px;
display: block;
margin: 0 auto;
text-align: center;
}
#header nav ul li {
float: left; list-style: none;
}
ul#nav li a {
display: block;
width: 100px;
height: 100px;
padding: 50px 0 0 0;
margin: 0 10px 0 10px;
font-family: 'MuseoSlab-500', Helvetica, sans-serif;
font-size: 16px;
text-transform: uppercase;
color: #000;
text-shadow: 0 2px 1px #bbbaba;
text-decoration: none;
}
ul#nav li a.mainnav:hover {
color: #13cad1;
text-shadow: 0 2px 1px #fff;
}
You don't need to use two separate lists. Treat the entire menu, including your image, as one list. Consider something like this for your HTML:
<div>
<ul id="nav">
<li>Home</li>
<li>About Me</li>
<li><img src="images/yourLogo.png"></li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
And make sure you have your style set to float: left;
#nav li { float: left; list-style: none;}
Then, just center the entire div on the page, and style your links as you want.
SEPARATE NOTES:
In your code, you are missing the closing tag for your first unordered list.
The navigation element is not very widely supported, so depending on your audience you may want to use a div.
So in my code I have a sticky footer. And the sticky footer has the #wrap container with a min-height of 100%. But with min-height you can't use height:100% on objects inside the wrap div.
So I add height:100% but it messes with the layout by making the footer roll over the content in the wrap div when window height is too small.
Anyone have fixes for this?
<div id="wrap">
<div id="main">
<div id="content">
</div>
</div>
<div class="clearfooter"></div>
</div>
<div id="footer">
</div>
CSS:
*{
padding: 0px;
margin: 0px;
}
html, body {
height: 100%;
}
body{
color: #FFF;
background-image:url('../images/black_denim.png');
}
#wrap {
min-height: 100%;
margin-bottom: -200px;
position: relative;
}
#topBanner{
width: 200px;
margin: 0px auto;
}
.clearfooter {
height: 200px;
clear: both;
}
/* footer */
#footer {
position: relative;
height: 200px;
width: 100%;
min-width: 960px;
}
If all you need is a sticky footer that doesn't cover up any of the body's content then just give the footer a fixed position and give the bottom of the body padding equal to the footers height.
body{
padding-bottom:200px;
}
#footer {
position: fixed;
bottom:0;
height: 200px;
width: 100%;
}
EDIT:
if your concern is that on very small screens the fixed footer covers up most of the screen then there is no workaround for this except for maybe hiding the footer dynamically using css media queries or javascript.
many mobile browsers do not support fixed positions precisely because of the issue of them covering large portions of the screen.