John Davidson

javascript - Dompdf cannot arrange html elements properly

0 comments
Message:


Hey guys i'm using Dompdf in laravel and i only have a h2 and a table on my dompdf view from which the pdf is generated so when i generate the pdf the both h2 and table elements kind of merges here is the actual problem.


Here is my code ->




<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Records</title>

</head>

<body>


<style>
.pdfContainer {
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;

}



table {
width: 70%;
text-align: center;
margin-right: auto;
margin-left: auto;
float: bottom;
border: none;

}

td {
text-align: center;
font-size: 0.95em;
color: #252a34;
font-weight: 500;
background-color: #fff;
white-space: nowrap;
}


th,
td {
padding: 15px;
border: 1px solid #252a34 !important;
border-collapse: collapse;
border-spacing: 0;
}

th {
text-align: center;
font-size: 0.95em;
font-weight: 800;
border: none;
white-space: nowrap;

}




.attdStatusTdpresent {
color: #18a14f;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-weight: 600;
font-size: 0.95em;
font-family: "Merriweather Sans", sans-serif;
}

.attdStatusTdabsent {
color: #b82348;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-weight: 600;
font-size: 0.95em;
font-family: "Merriweather Sans", sans-serif;
}


.attdStatusTdlate {
color: #ff2e63;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-size: 0.95em;
}

.attBehaviourExcellent {
color: #289672;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-size: 0.95em;
}

.attBehaviourGood {
color: #00bfa6;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-size: 0.95em;
}

.attBehaviourAverage {
color: #ffc947;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-size: 0.95em;
}

.attBehaviourBad {
color: #ff2e63;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-size: 0.95em;
}



.attProgressExcellent {
color: #289672;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-size: 0.95em;
}

.attProgressGood {
color: #00bfa6;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-size: 0.95em;
}

.attProgressNeed {
color: #ffc947;
padding: 8px;
width: 140px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-size: 0.95em;
white-space: nowrap;
}

.attProgressprogressive {
color: #185adb;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-size: 0.95em;
}



.pdfContainer {
width: 100%;
min-height: 100vh;
display: flex;
align-items: flex-start;
box-sizing: border-box;
}
</style>
<div class="pdfContainer">
<table>
<h2 style='margin:auto;'>{{$studentName}}</h2>
<tr>
<th> PRÉSENCE </th>
<th> COMPORTEMENT </th>
<th> PROGRES </th>
<th> DATE DE L’ATELIER </th>
</tr>
@foreach($records as $record)
<tr>
<td>
<p class="attdStatusTd{{$record['att_status']}}"> {{$record['att_status']}} </p>
</td>
<td>
<p class="attBehaviour{{$record['behaviour']}}"> {{$record['behaviour']}} </p>
</td>
<td>
<p class="attProgress{{$record['progress']}}"> {{$record['progress']}} </p>
</td>
<td>
<p> {{$record['customDate']}} </p>
</td>
</tr>
@endforeach
</table>
</div>
</body>
</html>


My Answer:
html



PDF


Title











Header 1 Header 2
Data 1 Data 2





Make sure you are using proper CSS styles to separate the h2 and table elements in the PDF. You can try adding some margin or padding to the h2 element to create some space between the h2 and table elements. Additionally, you can also try adding a page break before the table element to ensure proper arrangement in the PDF.

Rate this post

3 of 5 based on 5736 votes

Comments




© 2024 Hayatsk.info - Personal Blogs Platform. All Rights Reserved.
Create blog  |  Privacy Policy  |  Terms & Conditions  |  Contact Us