Im trying to set a background color in pdf generated with pisa. I have seen this post related question and try to implement them, but the background only display in a part of the pdf. This is my code:
{% load app_filters %}
<html>
<head>
<meta charset="UTF-8">
<title>Ficha Técnica</title>
<style type="text/css">
#page {
size: {{ pagesize|default:"A4" }};
margin-left: 2.5cm;
margin-right: 2.5cm;
margin-top: 2cm;
margin-bottom: 2cm;
background-image: url('{{ STATIC_URL }}pdf/fondo.png');
#frame header {
-pdf-frame-content: page-header;
margin-top: 0.7cm;
margin-right: 2mm;
margin-bottom: 0cm;
margin-left: 1.2cm;
}
#frame footer {
-pdf-frame-content: page-footer;
bottom: 0cm;
margin-left: 1cm;
margin-right: 1cm;
height: 1cm;
}
}
#font-face {
font-family: "light";
src: url('{{ STATIC_URL }}fonts/yanonekaffeesatz-light-webfont.ttf');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "bold";
src: url('{{ STATIC_URL }}fonts/yanonekaffeesatz-bold-webfont.ttf');
font-weight: normal;
font-style: normal;
}
.logo{
margin-bottom: 50px;
}
.general img{
width: 400px;
margin-bottom: 50px;
}
.titulo{
font-family: "bold";
font-size: 22px;
text-transform: uppercase;
color:#808080;
margin-bottom: 15px;
letter-spacing: "1";
}
.general p{
font-family: "light";
font-size: 13px;
color:#808080;
}
.line{
width:200pt;
border-top: 2px solid #808080;
color:white;
font-size: 1px;
}
.bases
{
font-family: "bold";
font-size: 12px;
color:#808080;
}
.bases table {-pdf-keep-in-frame-mode: shrink;}
.bases img{
width:85px;
}
table{text-align: center;}
</style>
</head>
<body>
<div class="content">
<div class="logo">
<center><img src='{{ STATIC_URL }}pdf/logo_pdf.png'></center>
</div>
<div class="general">
<center><img src="{{MEDIA_URL}}{{Proto.image}}" alt=""></center>
<h1 class='titulo'>{{Proto.name|upper}}</h1>
<p>{{Proto.description}}</p>
</div>
<div class='line'>.</div>
<div class="bases">
<h1 class='titulo'>BASES SELECCIONADAS</h1>
<center>
<table>
<tr>
{%for detalle in ProtoDetalle%}
<td>
<center><img src="{{MEDIA_URL}}{{detalle.base.especificImage}}" alt=""></center>
<br>
<h2>{{detalle.base.name|upper}}</h2>
<h2>{{detalle.tela.name|upper}}</h2>
<table>
<tr>
<td style='width:100px;'></td>
<td><h2>{{detalle.color.name|split_by:"-"}}</h2></td>
<td style='background-color:{{detalle.color.color}}; color:{{detalle.color.color}}; width:50px; font-size: 5px; border: 1px solid black;'>.</td>
<td style='width:100px;'></td>
</tr>
</table>
</td>
{%endfor%}
</tr>
</table>
</center>
</div>
</div>
</body>
</html>
The background image is just a color square 36px by 36px.
I tried to set background-color to body,html,div but only divs with content take the color. so i dont understand why the background-image property only sets in a porcent of the pdf displayed.
Any idea what is my mistake?
this is the current result:
I solved making a background image with the same size of A4 page (297 x 210 mm). Now the background cover all the pdf.
It seems to be working with pdf background, which I would suggest.
Note that the (lightweight) documentation mentions only pdf background.
https://xhtml2pdf-base.googlecode.com/hg/doc/xhtml2pdf-en.html
Related
hi i changed my code to style.css but the change site was not it confused me maybe i am doing something wrong look at my code below and draw your own conclusion, I hope for a good answer
Console Log:
PS C:\Users\kostia_admin\PycharmProjects\pythonProject32\mysite> python manage.py runserver
Watching for file changes with StatReloader
Performing system checks...
System check identified some issues:
WARNINGS:
?: (staticfiles.W004) The directory 'C:\Users\kostia_admin\PycharmProjects\pythonProject32\mysite\static' in the STATICFILES_DIRS setting does not exist.
System check identified 1 issue (0 silenced).
June 17, 2022 - 17:16:44
Django version 4.0.4, using settings 'mysite.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
[17/Jun/2022 17:16:46] "GET / HTTP/1.1" 200 3536
Not Found: /polls/static/polls/images/style.css
[17/Jun/2022 17:16:46] "GET /polls/static/polls/images/style.css HTTP/1.1" 404 2895
Not Found: /polls/style.css
[17/Jun/2022 17:16:46] "GET /polls/style.css HTTP/1.1" 404 2835
index.html(I think there's a mistake here. ):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/static/polls/style.css"/>
<link rel="stylesheet" href="/polls/style.css" type="text/css" />
<title>Shop</title>
</head>
<body>
<header class="header">
<div class="header-content">
<div class="header-logo">
<h1 class="logo">SunRise Donate shop</h1>
</div>
<nav class="header-navigation">
About
Diferent<i class="material-icons-outlined"></i>
</nav>
</div>
</header>
<main>
<div class="responsive-container">
<div class="grid">
<div class="grid-column">
<a class="product" href="#">
<div class="product-image">
<img src="https://reallyworld.ru/images/privileges/hero.webp" />
</div>
<div class="product-content">
<div class="product-info">
<h2 class="product-title">HERO</h2>
<p class="product-price">$ 5</p>
</div>
</div>
</a>
<a class="product" href="#">
<div class="product-image">
<img src="https://reallyworld.ru/images/privileges/ghelper.webp" />
</div>
<div class="product-content">
<div class="product-info">
<h2 class="product-title">GOD</h2>
<p class="product-price">$ 9</p>
</div>
</div>
</a>
<a class="product" href="#">
<div class="product-image">
<img src="https://sunmc.ru/source/img/wither.png" />
</div>
<div class="product-content">
<div class="product-info">
<h2 class="product-title">WITHER</h2>
<p class="product-price">$ 9</p>
</div>
</div>
</a>
</div>
<div class="grid-column">
<a class="product" href="#">
<div class="product-image">
<img src="https://sunmc.ru/source/img/phoenix.png" />
</div>
<div class="product-content">
<div class="product-info">
<h2 class="product-title">PHOENIX</h2>
<p class="product-price">$ 9</p>
</div>
</div>
</a>
<a class="product" href="#">
<div class="product-image">
<img src="https://sunmc.ru/source/img/avenger.png" />
</div>
<div class="product-content">
<div class="product-info">
<h2 class="product-title">AVENGER</h2>
<p class="product-price">$ 12</p>
</div>
</div>
</a>
<a class="product" href="#">
<div class="product-image">
<img src="https://sunmc.ru/source/img/legend.png" />
</div>
<div class="product-content">
<div class="product-info">
<h2 class="product-title">LEGEND</h2>
<p class="product-price">$ 5</p>
</div>
</div>
</a>
</div>
<div class="grid-column">
<a class="product" href="#">
<div class="product-image">
<img src="https://sunmc.ru/source/img/phantom.png" />
</div>
<div class="product-content">
<div class="product-info">
<h2 class="product-title">PHANTOM</h2>
<p class="product-price">$ 15</p>
</div>
</div>
</a>
<a class="product" href="#">
<div class="product-image">
<img src="https://sunmc.ru/source/img/supreme.png" />
</div>
<div class="product-content">
<div class="product-info">
<h2 class="product-title">SUPREME</h2>
<p class="product-price">$ 5</p>
</div>
</div>
</a>
</div>
</div>
</div>
</main>
</body>
</html>
style.css:
#import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght#400;700&display=swap');
*, *:before, *:after {
box-sizing: border-box;
}
body, h1, h2, h3, h4, p, ul, ol, li, figure, figcaption, blockquote, dl, dd {
margin: 0;
}
body {
scroll-behavior: smooth;
line-height: 1.5;
background-color: #FFF;
}
img {
max-width: 100%;
display: block;
}
a {
color: inherit;
font-weight: bold;
}
input, button, textarea, select {
font: inherit;
}
button {
border: 1px solid;
background-color: transparent;
}
body {
font-family: "DM Sans", sans-serif;
}
.responsive-container {
max-width: 1080px;
width: 90%;
margin-left: auto;
margin-right: auto;
}
.header {
border-bottom: 1px solid #d0d0d0;
min-height: 60px;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
display: flex;
justify-content: center;
}
.header-content {
display: flex;
width: 100%;
max-width: 2000px;
padding-left: 1.25rem;
padding-right: 1.25rem;
align-items: center;
justify-content: space-between;
}
.header-navigation {
display: flex;
align-items: center;
}
.header-navigation a {
margin-left: 1.5rem;
text-decoration: none;
font-size: 1rem;
}
.link-button {
display: flex;
align-items: center;
background-color: #fa3450;
border-radius: 0.375rem;
padding: 0.5em 1.25em;
color: #fff;
}
.link-button i {
font-size: 1.25rem;
margin-left: 0.5rem;
}
.logo {
font-size: 1.25rem;
font-weight: 700;
}
main {
padding-top: 2rem;
padding-bottom: 6rem;
}
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.grid-column {
display: flex;
flex-direction: column;
}
.grid-column > * + * {
margin-top: 2rem;
}
.product {
border-radius: 0.25rem;
text-decoration: none;
font-weight: 400;
transition: 0.15s ease;
overflow: hidden;
}
.product:hover, .product:focus {
outline: none;
box-shadow: 0 0 0 0.21rem Green;
}
.product:hover .product-content, .product:focus .product-content {
border-color: transparent;
}
.product-image {
border-radius: 0.25rem 0.25rem 0 0;
overflow: hidden;
}
.product-content {
padding: 1rem;
border-left: 1px solid #dedede;
border-right: 1px solid #dedede;
border-bottom: 1px solid #dedede;
border-radius: 0 0 0.25rem 0.25rem;
display: flex;
align-items: center;
justify-content: space-between;
transition: 0.15s ease;
background-color: #F43FF;
}
.product-action {
color: #043242300;
width: 2.5rem;
height: 2.5rem;
border-radius: 0.25rem;
font-size: 1.25rem;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: 0.15s ease;
}
.product-action:hover {
background-color: #e5ffeb;
}
.product-info {
display: flex;
flex-direction: column;
}
.product-title {
font-size: 1.125rem;
line-height: 1.25;
}
.product-price {
margin-top: 0.25rem;
}
.credits {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
margin-top: 10rem;
color: #7577;
font-size: 0.875rem;
}
.credits a {
display: block;
}
#media (max-width: 600px) {
.grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 1.5rem;
}
.grid-column > * + * {
margin-top: 1.5rem;
}
}
Could you reformat my code to correct the errors?
I think I made a mistake somewhere very simple (I'm new to django so don't judge)
/* Add property modal */
.add-property {
position: relative;
width: 60rem;
height: 35rem;
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
border-radius: 15px;
}
.modal-title {
position: relative;
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.close {
background-color: transparent;
border: none;
}
#footer-btn {
position: relative;
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
border: 0.1em solid black;
border-radius: 10px;
width: 5em;
height: 2.5em;
font-weight: 600;
margin-bottom: 1.2em;
}
.add-prop {
background-color: #3498db;
color: white;
}
.add-prop:hover {
background-color: rgb(12, 65, 180);
}
.add-inpt {
outline: none;
border-width: 0 0 0.17em;
border-color: black;
border-radius: 5px;
width: 15em;
height: 2em;
text-align: center;
}
.prop-info-row {
height: 15em;
position: relative;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.prop-info-col {
height: 2em;
}
.add-inpt::placeholder {
text-align: center;
}
.main-add-row {
width: 50rem;
height: 26rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.26);
}
#property-types {
background-color: white;
height: 2.5em;
width: 13em;
border-radius: 5px;
}
/* SIDE NAV INSIDE ADD PROPERTY MODAL */
.side-nav,
.nav-menu {
height: 100%;
}
.side-nav .nav-menu {
list-style: none;
padding: 40px 0;
width: 13em;
background-color: #3498db;
}
.side-nav .nav-item {
position: relative;
padding: 0.7em 1.5em;
position: relative;
top: 42%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.nav-item.active {
background-color: #fff;
box-shadow: 0px -3px rgba(0, 0, 0, 0.2), 0px 3px rgba(0, 0, 0, 0.2);
}
.nav-item.active a {
color: #2980b9;
}
.nav-item a {
text-decoration: none;
color: #fff;
}
.menu-text {
padding: 0 20px;
}
.side-nav .nav-item.active::before {
content: "";
position: absolute;
background-color: transparent;
bottom: 100%;
right: 0;
height: 150%;
width: 20px;
border-bottom-right-radius: 25px;
box-shadow: 0 20px 0 0 #fff;
}
.side-nav .nav-item.active::after {
content: "";
position: absolute;
background-color: transparent;
top: 100%;
right: 0;
height: 150%;
width: 20px;
border-top-right-radius: 25px;
box-shadow: 0 -20px 0 0 #fff;
}
/* UPLOAD IMAGE STYLE */
:root {
--clr-white: rgb(255, 255, 255);
--clr-black: rgb(0, 0, 0);
--clr-light: rgb(245, 248, 255);
--clr-light-gray: rgb(196, 195, 196);
--clr-blue: rgb(63, 134, 255);
--clr-light-blue: rgb(171, 202, 255);
}
/* End General Styles */
/* Upload Area */
.upload-area {
width: 100%;
max-width: 25rem;
background-color: var(--clr-white);
box-shadow: 0 5px 10px rgb(218, 229, 255);
border: 2px solid var(--clr-light-blue);
border-radius: 24px;
padding: 1rem 1.875rem 0rem 1.875rem;
margin: 0.625rem;
text-align: center;
}
/* Header */
.upload-area__title {
font-size: 1.8rem;
font-weight: 500;
margin-bottom: 0.3125rem;
}
.upload-area__paragraph {
font-size: 0.9375rem;
color: var(--clr-light-gray);
margin-top: 0;
}
.upload-area__tooltip {
position: relative;
color: var(--clr-light-blue);
cursor: pointer;
transition: color 300ms ease-in-out;
}
.upload-area__tooltip:hover {
color: var(--clr-blue);
}
.upload-area__tooltip-data {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -125%);
min-width: max-content;
background-color: var(--clr-white);
color: var(--clr-blue);
border: 1px solid var(--clr-light-blue);
padding: 0.625rem 1.25rem;
font-weight: 500;
opacity: 0;
visibility: hidden;
transition: none 300ms ease-in-out;
transition-property: opacity, visibility;
}
.upload-area__tooltip:hover .upload-area__tooltip-data {
opacity: 1;
visibility: visible;
}
/* Drop Zoon */
.upload-area__drop-zoon {
position: relative;
height: 13.8rem;
/* 180px */
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
border: 2px dashed var(--clr-light-blue);
border-radius: 15px;
margin-top: 1.1rem;
cursor: pointer;
transition: border-color 300ms ease-in-out;
}
.upload-area__drop-zoon:hover {
border-color: var(--clr-blue);
}
.drop-zoon__icon {
display: flex;
font-size: 3.75rem;
color: var(--clr-blue);
transition: opacity 300ms ease-in-out;
}
.drop-zoon__paragraph {
font-size: 0.9375rem;
color: var(--clr-light-gray);
margin: 0;
margin-top: 0.625rem;
transition: opacity 300ms ease-in-out;
}
.drop-zoon:hover .drop-zoon__icon,
.drop-zoon:hover .drop-zoon__paragraph {
opacity: 0.7;
}
.drop-zoon__loading-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
color: var(--clr-light-blue);
z-index: 10;
}
.drop-zoon__preview-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
padding: 0.3125rem;
border-radius: 10px;
display: none;
z-index: 1000;
transition: opacity 300ms ease-in-out;
}
.drop-zoon:hover .drop-zoon__preview-image {
opacity: 0.8;
}
.drop-zoon__file-input {
display: none;
}
/* (drop-zoon--over) Modifier Class */
.drop-zoon--over {
border-color: var(--clr-blue);
}
.drop-zoon--over .drop-zoon__icon,
.drop-zoon--over .drop-zoon__paragraph {
opacity: 0.7;
}
/* (drop-zoon--over) Modifier Class */
.drop-zoon--Uploaded .drop-zoon__icon,
.drop-zoon--Uploaded .drop-zoon__paragraph {
display: none;
}
/* File Details Area */
.upload-area__file-details {
height: 0;
visibility: hidden;
opacity: 0;
text-align: left;
transition: none 500ms ease-in-out;
transition-property: opacity, visibility;
transition-delay: 500ms;
}
/* (duploaded-file--open) Modifier Class */
.file-details--open {
height: auto;
visibility: visible;
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<button data-bs-toggle="modal" data-bs-target="#ModalAddProperty" class="add-more" id="add-property">Add
Property</button>
<form action="" enctype="multipart/form-data" method="POST" id="id_ajax_upload_form">
{% csrf_token %}
<div class="modal fade" id="ModalAddProperty" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content add-property">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Add Property</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<i class="fas fa-times"></i>
</button>
</div>
<div class="modal-body" style="padding: 0;">
<div class="row g-0 main-add-row">
<div class="col-sm-3" style="padding: 0;">
<nav class="side-nav">
<ul class="nav-menu">
<li class="nav-item active" id="img-nav-link">
<a href="#">
<i class="fa-solid fa-file-arrow-up"></i>
<span class="menu-text">Upload Image</span>
</a>
</li>
<li class="nav-item" id="prop-info-nav-link">
<a href="#">
<i class="fa-solid fa-house-chimney-crack"></i>
<span class="menu-text">Propery Info</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="col-md-9 d-flex justify-content-center" id="toggle-content-add-modal">
<!-- UPLOAD IMAGE SECTION START -->
<div id="uploadArea" class="upload-area" data-target="img-nav-link">
<!-- Header -->
<div class="upload-area__header">
<h1 class="upload-area__title">Upload your file</h1>
<p class="upload-area__paragraph">
File should be an image
<strong class="upload-area__tooltip">
Like
<span class="upload-area__tooltip-data"></span>
<!-- Data Will Come From Js -->
</strong>
</p>
</div>
<!-- End Header -->
<!-- Drop Zoon -->
<div id="dropZoon" class="upload-area__drop-zoon drop-zoon">
<span class="drop-zoon__icon">
<i class='bx bxs-file-image'></i>
</span>
<p class="drop-zoon__paragraph">Drop your file here or Click to browse</p>
<span id="loadingText" class="drop-zoon__loading-text">Please Wait</span>
<img src="" alt="Preview Image" id="previewImage" class="drop-zoon__preview-image" draggable="false">
<input type="file" id="fileInput-single" class="drop-zoon__file-input" accept="image/*">
</div>
<!-- End Drop Zoon -->
<!-- File Details -->
<div id="fileDetails" class="upload-area__file-details file-details">
<div id="uploadedFile" class="uploaded-file">
<div class="uploaded-file__icon-container">
<i class='bx bxs-file-blank uploaded-file__icon'></i>
<span class="uploaded-file__icon-text"></span>
<!-- Data Will be Comes From Js -->
</div>
<div id="uploadedFileInfo" class="uploaded-file__info">
<span class="uploaded-file__name">Project 1</span>
<span class="uploaded-file__counter">0%</span>
</div>
</div>
</div>
<!-- End File Details -->
</div>
<!-- UPLOAD IMAGE SECTION END -->
<!-- PROPERTY INFO START -->
<div class="row g-0 justify-content-center prop-info-row" data-target="prop-info-nav-link" style="display: none;">
<div class="col-md-8 prop-info-col">
<p style="font-weight: 600;">Property Type</p>
</div>
<div class="col-md-8 d-flex justify-content-center prop-info-col">
<select name="property-types" id="property-types">
<option value="volvo">Tenament</option>
<option value="saab">Car</option>
<option value="opel" selected>Helicopter</option>
<option value="audi">Space Shuttle</option>
</select>
<div class="input-group mb-3 ms-3">
<span class="input-group-text" id="basic-addon1">OR</span>
<input type="text" class="form-control" id="new-prop-type" placeholder="Enter a new type" aria-label="Property-Type" aria-describedby="basic-addon1" autocomplete="off">
</div>
</div>
<div class="col-md-8 d-flex justify-content-center prop-info-col mt-5">
<input type="text" id="prop-name" class="add-inpt" placeholder="Property Name" autocomplete="off">
</div>
<div class="col-md-8 d-flex justify-content-center prop-info-col mt-3">
<input type="text" id="prop-address" class="add-inpt" placeholder="Property Address" autocomplete="off">
</div>
</div>
<!-- PROPERTY INFO END -->
</div>
</div>
</div>
<div class="modal-ftr">
<button type="submit" class="add-prop" id="footer-btn" data-bs-dismiss="modal">Add</button>
</div>
</div>
</div>
</div>
</form>
I have been using AJAX recently with DJANGO to send text data. It has been working smoothly and feels an easy method. But I cant understand and there no proper resource to learn to send images with AJAX and save to Django Database.
HTML:
<input type="file" id="fileInput-single" class="drop-zoon__file-input" accept="image/*">
JS:
$(".add-prop").click(function() {
var data = new FormData();
data.append("image", $("#fileInput-single")[0].files[0])
data.append("csrfmiddlewaretoken", $("input[name=csrfmiddlewaretoken]").val())
$.ajax({
method: "POST",
url: "{% url 'upload-prop-images' %}",
processData: false,
contentType: false,
mimeType: "multipart/form-data",
data: data,
success: function(data) {
if (data.status == "Upload Done") {
console.log("Uploading Done successfully")
}
}
})
});
models.py
class Property(models.Model):
user = models.ForeignKey(User, on_delete=models.CASCADE, null=True, related_name='property_user')
prop_images = models.ImageField(upload_to="prop_images")
views.py
def uploadPropImages(request):
image = request.POST['image']
property_new = Property(user_id=request.user.id, prop_images=image)
property_new.save()
return JsonResponse({'status': 'Upload Done'})
urls.py
urlpatterns = [
path('upload-prop-images/', views.uploadPropImages, name='upload-prop-images')
]
There is one tutorial using the forms.py file but I don't want to create a forms.py file.
HTML
<form id="upload-file" enctype="multipart/form-data">
{% csrf_token %}
<input type="file" name="file">
<button type="submit" class="btn btn-success">Upload</button>
</form>
JS
$('body').on('submit','#upload-file',function(e){
e.preventDefault()
var formData = new FormData(this);
$.ajax({
url:'/url/',
type: 'POST',
data: formData,
success: function (response) {
},
error: function (response) {
},
cache: false,
contentType: false,
processData: false
});
VIEWS.py
def fileupload(request):
if request.method=="POST":
property = Property()
property.prop_images = request.FILES['file_name']
property.user = self.request.user.username
property.save()
# Can update response as per requirement.
# Can Add `Status`: Success/Failed to make it more clear.
return JsonResponse({"Message":"File Uploaded Successfully"})
return JsonResponse({"Message":""})
I am trying to generate a PDF using html+css using xhtml2pdf.pisa using Django. However, I'm running into all sorts of weird issues with the CSS.
Below is my code:
def render_to_pdf(template_src, context_dict={}):
template = get_template(template_src)
html = template.render(context_dict)
result = BytesIO()
pdf = pisa.pisaDocument(BytesIO(html.encode("ISO-8859-1")), result)
if not pdf.err:
return HttpResponse(result.getvalue(), content_type='application/pdf')
return None
And my template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example 2</title>
<style>
#font-face {
font-family: SourceSansPro;
src: url(SourceSansPro-Regular.ttf);
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
a {
color: #0087C3;
text-decoration: none;
}
body {
position: relative;
width: 21cm;
height: 29.7cm;
margin: 0 auto;
color: #555555;
background: #FFFFFF;
font-family: Arial, sans-serif;
font-size: 14px;
font-family: SourceSansPro;
}
header {
padding: 10px 0;
margin-bottom: 20px;
border-bottom: 1px solid #AAAAAA;
}
#logo {
float: left;
margin-top: 8px;
}
#logo img {
height: 70px;
}
#company {
float: right;
text-align: right;
}
#details {
margin-bottom: 50px;
}
#client {
padding-left: 6px;
border-left: 6px solid #0087C3;
float: left;
}
#client .to {
color: #777777;
}
h2.name {
font-size: 1.4em;
font-weight: normal;
margin: 0;
}
#invoice {
float: right;
text-align: right;
}
#invoice h1 {
color: #0087C3;
font-size: 2.4em;
line-height: 1em;
font-weight: normal;
margin: 0 0 10px 0;
}
#invoice .date {
font-size: 1.1em;
color: #777777;
}
table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 20px;
}
table th,
table td {
padding: 20px;
background: #EEEEEE;
text-align: center;
border-bottom: 1px solid #FFFFFF;
}
table th {
white-space: nowrap;
font-weight: normal;
}
table td {
text-align: right;
}
table td h3{
color: #57B223;
font-size: 1.2em;
font-weight: normal;
margin: 0 0 0.2em 0;
}
table .no {
color: #FFFFFF;
font-size: 1.6em;
background: #57B223;
}
table .desc {
text-align: left;
}
table .unit {
background: #DDDDDD;
}
table .qty {
}
table .total {
background: #57B223;
color: #FFFFFF;
}
table td.unit,
table td.qty,
table td.total {
font-size: 1.2em;
}
table tbody tr:last-child td {
border: none;
}
table tfoot td {
padding: 10px 20px;
background: #FFFFFF;
border-bottom: none;
font-size: 1.2em;
white-space: nowrap;
border-top: 1px solid #AAAAAA;
}
table tfoot tr:first-child td {
border-top: none;
}
table tfoot tr:last-child td {
color: #57B223;
font-size: 1.4em;
border-top: 1px solid #57B223;
}
table tfoot tr td:first-child {
border: none;
}
#thanks{
font-size: 2em;
margin-bottom: 50px;
}
#notices{
padding-left: 6px;
border-left: 6px solid #0087C3;
}
#notices .notice {
font-size: 1.2em;
}
footer {
color: #777777;
width: 100%;
height: 30px;
position: absolute;
bottom: 0;
border-top: 1px solid #AAAAAA;
padding: 8px 0;
text-align: center;
}
</style>
</head>
<body>
<header class="clearfix">
<div id="logo">
<img src="logo.png">
</div>
<div id="company">
<h2 class="name">Company Name</h2>
<div>455 Foggy Heights, AZ 85004, US</div>
<div>(602) 519-0450</div>
<div>company#example.com</div>
</div>
</div>
</header>
<main>
<div id="details" class="clearfix">
<div id="client">
<div class="to">INVOICE TO:</div>
<h2 class="name">John Doe</h2>
<div class="address">796 Silver Harbour, TX 79273, US</div>
<div class="email">john#example.com</div>
</div>
<div id="invoice">
<h1>INVOICE 3-2-1</h1>
<div class="date">Date of Invoice: 01/06/2014</div>
<div class="date">Due Date: 30/06/2014</div>
</div>
</div>
<table border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th class="no">#</th>
<th class="desc">DESCRIPTION</th>
<th class="unit">UNIT PRICE</th>
<th class="qty">QUANTITY</th>
<th class="total">TOTAL</th>
</tr>
</thead>
<tbody>
<tr>
<td class="no">01</td>
<td class="desc"><h3>Website Design</h3>Creating a recognizable design solution based on the company's existing visual identity</td>
<td class="unit">$40.00</td>
<td class="qty">30</td>
<td class="total">$1,200.00</td>
</tr>
<tr>
<td class="no">02</td>
<td class="desc"><h3>Website Development</h3>Developing a Content Management System-based Website</td>
<td class="unit">$40.00</td>
<td class="qty">80</td>
<td class="total">$3,200.00</td>
</tr>
<tr>
<td class="no">03</td>
<td class="desc"><h3>Search Engines Optimization</h3>Optimize the site for search engines (SEO)</td>
<td class="unit">$40.00</td>
<td class="qty">20</td>
<td class="total">$800.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"></td>
<td colspan="2">SUBTOTAL</td>
<td>$5,200.00</td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2">TAX 25%</td>
<td>$1,300.00</td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2">GRAND TOTAL</td>
<td>$6,500.00</td>
</tr>
</tfoot>
</table>
<div id="thanks">Thank you!</div>
<div id="notices">
<div>NOTICE:</div>
<div class="notice">A finance charge of 1.5% will be made on unpaid balances after 30 days.</div>
</div>
</main>
<footer>
Invoice was created on a computer and is valid without the signature and seal.
</footer>
</body>
</html>
My code is pretty basic and nothing special, they are just pretty much copied verbatim from the web
I cannot observe a pattern from these symptoms other than just thinking the css parser and layout engine is just totally incomplete and non-functional. However I cannot find anyone online who has the same issues as me. Am I crazy? I'm not sure what is happening here... any help would be appreciated.
I had the same issue I had this line:
.f1,input,textarea{border:1px solid #000;}
Which would cause the issue adding an extra 0 fixed it for me.
.f1,input,textarea{border:1px solid #0000;}
edit:
I also have this in my style
black{background-color:#000;}
.white{background-color:#fff;}
For some reason having the background color value have four characters will cause the error and having the solid less than four will cause the same error.
Beginner here.
I'm trying to figure out how to put 5 elements on my nav bar.
First element is heading and the other for are li's.
Hopefully someone can help!
I want to get the following result:
each element fills up 20% of the width
But what I get is this.
Not equally distributed space
Below the snippet.
body {
width: 960px;
margin: auto;
background-color: slateblue;
}
#navigation {
background-color: white;
width: 960px;
}
#navigation h2 {
display: inline;
width: 20%;
background-color: #555;
margin: 0;
font-size: 18px;
color: #ffa0a0;
margin: 0;
}
#navigation ul {
list-style-type: none;
display: inline;
font-size: 0px;
margin: 0;
}
#navigation ul a {
display: inline-block;
width: 20%;
background-color: #555;
font-size: 18px;
color: #ffa0a0;
text-align: center;
margin: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Pagename</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="navigation">
<h2>Pagename</h2>
<ul>
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>Services</li>
</a>
<a href="#">
<li>Portfolio</li>
</a>
<a href="#">
<li>Contacts</li>
</a>
</ul>
</div>
</body>
</html>
You can achieve this easily by using flexbox feature.
I slightly edited your code to
replace ul by a div element (since you don't use li items)
replaced body width by 100% to make it working with the snippet display (this one is just for a good-looking display in the answer, you can replace it by your pixel value. Also div width style is by default set to 100% (it's a block displayed item), you don't need to set it for the div#navigation element.
Update. I added the Pagename heading to the equally distributed items to fit the design you want (according to the screenshot).
body {
width: 100%;
margin: auto;
background-color: slateblue;
}
#navigation {
background-color: white;
}
#navigation #nav-items {
list-style-type: none;
justify-content:space-between;
display: flex;
font-size: 0px;
margin: 0;
}
#navigation h2 {
background-color: #555;
margin: 0;
font-size: 18px;
color: #ffa0a0;
margin: 0;
}
#navigation #nav-items a {
background-color: #555;
font-size: 18px;
color: #ffa0a0;
text-align: center;
margin: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Pagename</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="navigation">
<div id="nav-items">
<h2>Pagename</h2>
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>Services</li>
</a>
<a href="#">
<li>Portfolio</li>
</a>
<a href="#">
<li>Contacts</li>
</a>
</div>
</div>
</body>
</html>
I have a list of draggable items, for a responsive design :
https://codepen.io/daedrias/pen/KyPZYG
header,
footer {
background-color: #5fba7d;
padding: 1rem;
}
.container {
display: flex;
min-height: 800px;
}
.menu {
width: 15em;
background-color: #FFF8DC;
}
.content {
background-color: #fff;
border-left: 1px solid #958C4D;
flex: 1;
padding: 5px 10px;
}
.sortable-list {
width: 18.75em;
}
.row {
display: flex;
margin-bottom: 15px;
box-sizing: border-box;
}
.row>* {
display: inline-block;
border-radius: 4px;
box-sizing: border-box;
}
.left {
height: 2em;
display: flex;
cursor: move;
}
.handle {
width: 1.5em;
height: 2em;
line-height: 2em;
text-align: center;
margin-right: 0.125em;
border-radius: 4px;
}
.icon {
width: 2em;
height: 2em;
border-radius: 4px;
background-color: #c97777;
margin: 0 0.125em;
}
.stretch {
flex: 1;
border: 1px solid black;
padding: 6px 12px;
margin: 0 0.1em;
}
.trash {
width: 2em;
height: 2em;
line-height: 2em;
text-align: center;
margin-left: 0.125em;
}
.bouton-ajout {
flex: 1;
border: 1px solid black;
border-radius: 4px;
padding: 6px 12px;
margin: 0 2.2em 0 1.75em;
}
/* mobile layout */
#media (max-width: 768px) {
.sortable-list {
width: 100%;
}
.menu {
display: none;
}
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>Header</header>
<div class="container">
<div class="menu">
</div>
<div class="content">
<p>asdasd</p>
<div class="sortable-list">
<div class="row">
<div class="left">
<div class="handle">=</div>
<div class="icon"></div>
</div>
<div class="stretch">
banana
</div>
<div class="trash">X</div>
</div>
<div class="row">
<div class="left">
<div class="handle">=</div>
<div class="icon"></div>
</div>
<div class="stretch">
pineapple
</div>
<div class="trash">X</div>
</div>
<div class="row">
<div class="left">
<div class="handle">=</div>
<div class="icon"></div>
</div>
<div class="stretch">
orange
</div>
<div class="trash">X</div>
</div>
<div class="bouton-ajout">
+ Add a row V
</div>
</div>
</div>
<div>
</body>
<html>
Everything is pretty much as I want it to be (as in : the positioning, not the colors of this example), but I'm not happy about the 'add' button.
I would like to know if there is a better way to handle the width of the 'Add' button,so it is the same size as the icon + label combined. For now I use margins.
Is the flex display a good solution in this case? Should I use something else like display : table?