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
| User | Count |
|---|---|
| 18 | |
| 15 | |
| 10 | |
| 7 | |
| 4 |
