Can I generate PDF with CSS position: absolute; for <img src="..."/> html tag?
I need to place handwritten signature and company stamp (PNG files) to bottom of order voucher at non standard place, that they run a little on the goods table. Position absolute will save my time for that, but it's don't working.
EDIT:
I have an answer from xhtml2pdf GitHub repo:
Well absolute position is not supported right now, but if you are looking for how to set images in specific part of page in all pages, see frames.
So, my question is still actual. Real usage example with xhtml2pdf frames for images will be great.
And real usage example from Luis Zárate (xhtml2pdf collaborator):
<html>
<head>
<style>
#page {
size: a4 portrait;
#frame content_frame { /* Content Frame */
left: 50pt; width: 512pt; top: 90pt; height: 632pt;
}
#frame footer_frame { /* Another static Frame */
-pdf-frame-content: footer_content;
left: 450pt; width: 300pt; top: 672pt; height: 200pt;
}
}
</style>
</head>
<body>
<!-- Content for Static Frame 'footer_frame' -->
<div id="footer_content">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/123px-Tux.svg.png?download">
</div>
{% lorem 10 p %}
<pdf:pdf-next-page />
{% lorem 10 p %}
</body>
</html>
Code generates this PDF file: https://github.com/xhtml2pdf/xhtml2pdf/files/1754033/report-7.pdf
Related
I have created a plotly graph in python and would like to display it on my HTML page. The problem is that the graph does not seem to fit the div propertly. Here is what I mean:
I would like it to scale based on the screen size to fit into the first column, but no matter what i do in iframe, the size of the graph itsesf remains constant. How can that be fixed?
P.S. I am unable to change the python code, so I am looking for the solution in HTML, but it would be interesting to hear how to fix this in the future in python
Here is the code for the page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<h2>Two Equal Columns</h2>
<div class="row">
<div class="column" style="background-color:#aaa;">
<iframe id="igraph" scrolling="no" style="display: block; width: 100%; height: 100%" seamless="seamless" src="report_graph_2.html"></iframe>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<p>Some text..</p>
</div>
</div>
</body>
</html>
And here is a full website if you need to see the code for the plotly graph.
I have several icons that I want to line up at the end of the application. So that when I click on the image, I was transferred to a link. How should I do it?
So far, I have only managed to add this implementation through st.markdown.but they are arranged vertically because I added a new item every time I wrote markdown.
You can create custom components in streamlit using HTML. Maybe you can create a social media component.
Create a file my_component.html
<html>
<head>
<style>
.body {
height: 64px;
}
.parent {
width: 100%;
height: auto;
display: flex;
justify-content: center;
}
.child {
margin: 5px;
height: 32px;
width: 32px;
}
</style>
</head>
<body>
<div class="parent">
<a class = "child" href="https://www.google.com"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/1200px-Google_%22G%22_Logo.svg.png" alt="alt" style="width:32px;height:32px;"></a>
<a class = "child" href="https://wwww.reddit.com"><img src="https://www.redditinc.com/assets/images/site/reddit-logo.png" alt="alt" style="width:32px;height:32px;"></a>
<a class = "child" href="https://wwww.facebook.com"><img src="https://facebookbrand.com/wp-content/uploads/2019/04/f_logo_RGB-Hex-Blue_512.png?w=512&h=512" alt="alt" style="width:32px;height:32px;"></a>
</div>
</body>
</html>
I've added 3 links to google, reddit,and facebook respectively. Add or edit these to something custom.
In the streamlit file, you can import HTML files as components using the components library. The implementation I'm sharing is a very simplified version.
import streamlit as st
import streamlit.components.v1 as components
HtmlFile = open("my_component.html", 'r', encoding='utf-8')
source_code = HtmlFile.read()
print(source_code)
st.text("Navbar Component")
components.html(source_code)
It's a bit basic but yields something like this.
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 am developing a webpage through Flask and would like to generate PDF using WeasyPrint.
I do understand that flask would require static url of defining my css file and include #media print at the css.
from
<link rel=stylesheet href="{{ url_for('static', filename='css/style.css') }}">
to
<link rel=stylesheet href="{{ url_for('static', filename='css/print.css') }}" media= "print" >
#media print {
logo{
width : 50px !important;
height : 100px !important;
object-fit: cover;
}
}
But it does not appear the resized image to my desired requirements.
This command don't work at weasyprint,
You will need use CSS in Html File.
Like that:
<style> /* use CSS into style */
#page {
size: A4; /* Change from the default size of A4 */
margin: 3.5mm; /* Set margin on each page */
}
.IMAGE{
height: 120px;
width: 120px;
margin: 0 auto;
}
</style>
Bye.
I am trying to create a PDF via the python weasyprint library HTML converter. I want to use a full page background image (svg) that contains the headers/footers and overlay content on top of them.
The issue is regarding page breaks... In order for the image to be full size I set the #page margin to 0, but then of course the page doesn't break until the very bottom. If I set the margins to a decent page break distance I then can't get the image to be full page size disregarding the margins.
Is there a way to circumvent this problem or is the idea doomed to failure
I don't really see your problem, but if you want a background image that covers the full window, you could set it to the body and make the body's min-width and min-height to 100vw and 100vh like so:
body {
margin: 0;
min-width: 100vw;
min-height: 100vh;
background-image: url("YOUR_IMG_URL");
background-size: contain; /*or cover or whatever you like*/
}
<html>
<head>
</head>
<body>
</body>
</html>
<style>
image
{
margin: 0px;
width: 100%;
height: 100%;
}
</style>