I am trying to create some sort of ID register that displays basic bio data of staff. Such as Name, Gender, region and a passport photo. I want to export the register in full (all pages as one pdf) or page by page into PDFs.
Problem is, when I export the pdf, the layout is completely different from what is shown in the browser.
The webpage view has two columns of cards while the exported PDF forces all the cards into one row.
My wappler view
A PDF renders very different than a HTML page in the browser. The HTML in your page is converted to something that the PDF understands. I see that your HTML has all the 6 cards in a single row, the browser will automatically flow them depending on the available space but the PDF just puts them all in a single row as specified in your HTML.
To get them correctly in the PDF you have to group your cards in groups of 2 per row.
Also see this for a possible solution.
Thank you very much @patrick and @scott . Here is an update.
When I switched the repeat-children to the Dynamic Attribute Repeat, the columns are only displayed on the left side. No matter the row numbers I set in the row layout panel, the columns don't get distributed to the right side. My goal is to have at least 2 columns per row.
Below is the view after using the dynamic attribute repeat.
Below is a screenshot of the display when I use convert to repeat children.
What could be wrong?
While I can not see all of the code for you page, make sure you have the following:
Hello @scott apologies for the late response. Time difference is huge. Below is the code for the page after applying the three steps above.
<head>
<meta name="ac:base" content="/voter/www">
<base href="/voter/www/">
<script src="dmxAppConnect/dmxAppConnect.js"></script>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap/5/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="dmxAppConnect/dmxPdfCreator/dmxPdfCreator.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/pdfmake@0.2.9/build/pdfmake.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/pdfmake@0.2.9/build/vfs_fonts.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake@2.5.2/browser.min.js" defer></script>
</head>
<body is="dmx-app" id="index">
<dmx-pdf-creator id="pdfcreator1" content="#forPDF" dmx-bind:page-margins="[40,40]"></dmx-pdf-creator>
<dmx-serverconnect id="sc_delegates" url="dmxConnect/api/delegates/listdelegates.php"></dmx-serverconnect>
<header>
<button id="btn1" class="btn text-bg-success" dmx-on:click="pdfcreator1.open()">Button</button>
</header>
<div class="wappler-block container shadow-none" id="delegatlist">
<div class="row row-cols-sm-2 row-cols-lg-1" id="mainrow">
<div id="forPDF" is="dmx-pdf-content" remove-extra-blanks="true" class="col">
<div class="row justify-content-xl-between row-cols-sm-2 row-cols-lg-3 row-cols-2" dmx-repeat:repeat1="sc_delegates.data.q_delegates.data">
<div class="rounded border-danger border-2 border ms-xl-2 me-xl-2 ps-xl-1 pe-xl-1 col-xl-6 col-xxl-5 mt-2 mb-2 col w-100">
<h4>{{id}} - {{FirstName}}</h4>
<p>{{Gender}} {{Region}}</p>
</div>
</div>
</div>
</div>
</div>
<script src="bootstrap/5/js/bootstrap.bundle.min.js"></script>
</body>
Try adding some responsive settings to the 'col' class in this line or try "col-3" to force 4 columns.