LinkedIn
Twitter
Hi @SkrOYC ,
I tried to remove the signature image link within the images and followed your html code, but the image does not appear in the generated PDF file, like this:
|
this my HTMl
<p> <img src="<<[Sender Sign text]>>"
style="width: inherit; height: inherit; object-fit: scale-down; object-position: center center;"/></p>format rules :
can you helping me?
What level of complexity could you do with regards to images and charts?
Could you do something like this:
Very good, your publications have helped me a lot in creating and controlling the behavior of my PDFs created in Appsheet.
But I am encountering a difficulty which I don't know where to deal with since my knowledge is very limited.
I am trying to create a PDF which is a layout to send to the printer of a filtered column, the difficulty I am encountering is being able to layout with a table in which there are different widths, heights and combinations of cells that each individual sticker forms and take advantage of the maximum role in printing, for this I need to create correlative stickers of 3 by 3, I found your response to a publication where you did it using div.flex-container and div.flex-child, the truth is that I have tried it and it works for me but I don't know how to give it specific widths ad heights for a layout
This is the html of how the layout should look
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
@Page {
size: 21cm 29cm;
margin: 0pt 0pt 0pt;
orientation: portrait;
}
table {
width: 21cm;
}
.mediatabla {
width: 100%;
}
td {
padding: 0pt;
}
p {
font-weight: normal;
text-decoration: none;
font-size: 8pt;
font-family: "Arial";
font-style: normal;
}
div {
object-position: center center;
}
.startend {
display: none;
}
.s3 {
background-color: #ffffff;
text-align: center;
font-weight: bold;
color: #000000;
font-family: "Arial";
font-size: 14pt;
vertical-align: middle;
white-space: nowrap;
direction: ltr;
padding: 2px 3px 2px 3px;
}
.s1 {
background-color: #ffffff;
text-align: center;
font-weight: bold;
color: #ea4335;
font-family: "Arial";
font-size: 36pt;
vertical-align: middle;
white-space: nowrap;
direction: ltr;
padding: 2px 3px 2px 3px;
line-height: 86px;
}
.s4 {
background-color: #ffffff;
text-align: center;
font-weight: bold;
color: #ea4335;
font-family: "Arial";
font-size: 12pt;
vertical-align: middle;
white-space: nowrap;
direction: ltr;
padding: 2px 3px 2px 3px;
}
</style>
</head>
<body>
<table>
<tbody>
<tr style="height: 53px">
<td class="s0" colspan="2">
<div style="width: 526px; height: 53px">
<img
src="<<[Logo]>>"
style="
width: inherit;
height: inherit;
object-fit: scale-down;
object-position: center center;
"
/>
</div>
</td>
<td class="s0" colspan="2">
<div style="width: 526px; height: 53px">
<img
src="<<[Logo]>>"
style="
width: inherit;
height: inherit;
object-fit: scale-down;
object-position: center center;
"
/>
</div>
</td>
<td class="s0" colspan="2">
<div style="width: 526px; height: 53px">
<img
src="<<[Logo]>>"
style="
width: inherit;
height: inherit;
object-fit: scale-down;
object-position: center center;
"
/>
</div>
</td>
</tr>
<tr style="height: 86px">
<td class="s1">AND-1</td>
<td class="s2" rowspan="4">
<div style="width: 211px; height: 206px">
<img
src="<<[CodigoQR]>>"
style="
width: inherit;
height: inherit;
object-fit: scale-down;
object-position: left bottom;
"
/>
</div>
</td>
<td class="s1">AND-2</td>
<td class="s2" rowspan="4">
<div style="width: 211px; height: 206px">
<img
src="<<[CodigoQR]>>"
style="
width: inherit;
height: inherit;
object-fit: scale-down;
object-position: left bottom;
"
/>
</div>
</td>
<td class="s1">AND-3</td>
<td class="s2" rowspan="4">
<div style="width: 211px; height: 206px">
<img
src="<<[CodigoQR]>>"
style="
width: inherit;
height: inherit;
object-fit: scale-down;
object-position: left bottom;
"
/>
</div>
</td>
</tr>
<tr style="height: 58px">
<td class="s3">Andamio DACAME multi. 2 cuerpos</td>
<td class="s3">Andamio Aluminio PaxTower 1T</td>
<td class="s3">Andamio Aluminio PaxTower 1T</td>
</tr>
<tr style="height: 41px">
<td class="s4">Maquinaria sin matricular</td>
<td class="s4">Maquinaria sin matricular</td>
<td class="s4">Maquinaria sin matricular</td>
</tr>
<tr style="height: 18px">
<td class="s5"></td>
<td class="s5"></td>
<td class="s5"></td>
</tr>
<tr style="height: 53px">
<th style="height: 53px" class="row-headers-background"></th>
</tr>
</tbody>
</table>
</body>
</html>This code is how it should look, but what I need is that through the Start End, a filtered list looks like that, that is, 3 labels at a time
I am using this expression that returns the data I want, but I need to include it in the table
<p class="startifend">
<<Start: Filter(โItemsโ,[Familia]=[FamiliaInforme])>>
</p>and I have tried adding your sample like this but it doesn't work
<style>
@Page {
size: 21cm 29cm;
margin: 0pt 0pt 0pt;
orientation: portrait;
}
div.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1px;
}
div.flex-child {
height: auto;
width: 30vw;
text-align: center;
}
p.startifend {
display: none;
}
td{
width: 6.5cm;
height: 1cm;
}
</style>
</head>
<body>
<div class="flex-container">
<p class="startifend">
<<Start: Filter(โItemsโ,[Familia]=[FamiliaInforme])>>
</p>
<table>
<div class="flex-child">
<div class="inner-flex-container">
<tr>
<td>
<div class="inner-flex-child">
<<[IDHerramienta]>>
</div>
</td>
<td>
<div class="inner-flex-child">
<<[Descripcion]>>
</div>
</td>
</tr>
<tr>
<td>
<div class="inner-flex-child"><<[Estado]>></div>
</td>
<td></td>
</tr>
</div>
</div>
</table>
<p class="startifend"><<End>></p>
</div>
</body>This is the result I am looking for, to be able to create a PDF and have it displayed this way
I have made progress but I can't get the stickers to appear 3 at a time, they simply appear one below the other, the size is not respected either since they take up from side to side of the page, this is the code:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
@Page {
size: 21cm 29cm;
margin: 0pt 0pt 0pt;
orientation: portrait;
}
p {
font-size: 14pt;
font-family: "Arial";
font-style: bold;
}
p.matricular {
font-size: 12pt;
font-family: "Arial";
font-style: bold;
color: red;
}
.startend {
display: none;
}
div.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1px;
}
div.flex-Logo {
height: 53px;
width: 526px;
text-align: center;
flex: 1 1 33%;
}
div.flex-Herramienra {
height: auto;
width: 394px;
text-align: center;
font-weight: bold;
font-family: "Arial";
font-size: 36pt;
vertical-align: middle;
}
div.flex-QR {
height: 211px;
width: 211px;
}
p.startifend {
display: none;
}
</style>
</head>
<body>
<div class="flex-container">
<p class="startifend">
<<Start: Filter(โItemsโ,[Familia]=[FamiliaInforme])>>
</p>
<div class="flex-Logo">
<img
src="<<[Logo]>>"
style="
width: inherit;
height: inherit;
object-fit: scale-down;
object-position: center center;
"
/>
</div>
<div class="flex-Herramienra">
<span style="color: #ea4335"><<[IDHerramienta]>></span>
<p><<[Descripcion]>></p>
<p class="matricular">Maquinaria sin matricular</p>
</div>
<div class="flex-QR">
<img
src="<<[QR]>>"
style="
width: inherit;
height: inherit;
object-fit: scale-down;
object-position: center center;
"
/>
</div>
<p class="startifend"><<End>></p>
</div>
</body>
</html>This is how the PDF is delivered to me:
As you can see, more or less the format is what I'm looking for, but it needs to occupy 3 columns and for the QR to be larger, apparently a margin is created around the QR and that makes it smaller than the container
I have realized that the pixels that I had configured in the div were too large for the page width that I had assigned, so I am getting closer to achieving what I need, they already appear in 3 columns but the logo is still out of square
Let's see if tomorrow I get another little while and I can solve it.
this is my new code
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
@Page {
size: 21cm 29.7cm;
margin: 0pt 0pt 0pt;
orientation: portrait;
}
p {
font-size: 10pt;
font-family: "Arial";
font-style: bold;
}
p.matricular {
font-size: 6pt;
font-family: "Arial";
font-style: bold;
color: red;
}
div.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: start;
}
div.flex-Logo {
text-align: center;
flex: 1 1 33%;
}
div.flex-Herramienra {
height: auto;
width: 150px;
text-align: center;
font-weight: bold;
font-family: "Arial";
font-size: 12pt;
vertical-align: middle;
}
div.flex-QR {
height: 90px;
width: 90px;
}
p.startifend {
display: none;
}
</style>
</head>
<body>
<div class="flex-container">
<p class="startifend">
<<Start: Filter(โItemsโ,[Familia]=[FamiliaInforme])>>
</p>
<div class="flex-Logo">
<img
src="<<[Logo]>>"
style="
width: 180px;
height: 35px;
object-fit: scale-down;
object-position: center center;
"
/>
</div>
<div class="flex-Herramienra">
<span style="color: #ea4335"><<[IDHerramienta]>></span>
<p><<[Descripcion]>></p>
<p class="matricular">Maquinaria sin matricular</p>
</div>
<div class="flex-QR">
<img
src="<<[QR]>>"
style="
width: inherit;
height: inherit;
object-fit: scale-down;
object-position: center center;
"
/>
</div>
<p class="startifend"><<End>></p>
</div>
</body>
</html>
