i want to make column responsive in dompdf when doanwloading, in browser already responsive. But when downloading pdf, column not responsive.
[
i already use display:block, beacause i read in article dompdf can't read flex. In browser column is already responsive, but after downloading file pdf, the column not responsive. How to make responsive after downloading? Sorry for my bad english.
here is my code :
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
* {
font-family: 'Poppins', sans-serif;
}
/* table */
table {
border: 1px solid #ccc;
border-radius: 5px;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}
table caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table tr {
background-color: #ffffff;
border: 1px solid #ddd;
padding: .35em;
}
table th,
table td {
padding: .625em;
text-align: left;
color: #000000;
font-size: 12px;
}
table th {
color: #000000;
font-size: 12px;
letter-spacing: .1em;
text-transform: uppercase;
}
@media screen and (max-width: 600px) {
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
table td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right;
}
table td::before {
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
}
.imgContainer {
float: left;
width: 25%;
padding: 0 10px;
}
@media only screen and (max-width: 768px) {
.expenseTitle {
display: flex;
flex-direction: column;
align-items: start;
justify-content: start;
}
.expenseTitle p {
display: flex;
text-align: start !important;
align-items: start !important;
justify-content: start !important;
}
}
/* Float four columns side by side */
.column {
display:block;
float: left;
width: 25%;
padding: 0 10px;
}
/* .column:before{
content: '';
display: block;
float:left;
width: 30%;
}
.column:after {
content: '';
display: block;
width: 40%;
} */
@media screen and (min-width:1240px) {
.column {
float: left;
width: 15%;
padding: 0 10px;
}
}
/* Remove extra left and right margins, due to padding */
.row {
margin: 0 -5px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive columns */
@media screen and (max-width: 600px) {
.column {
width: 100%;
display: block;
margin-bottom: 20px;
}
}
/* Style the counter cards */
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
padding: 16px;
text-align: center;
background-color: #f1f1f1;
}
.column img {
min-width: 100%;
height: 100px !important;
}
.wrapper {
padding: 20px;
}
.wrapper_closed {
margin: 20px 0 20px;
}
.wrapper_closed span {
background: #edededad;
padding: 10px;
border-radius: 20px
}
.expenseTitle {
display: flex;
align-items: center;
justify-content: space-between;
}
.expenseTitle p {
font-size: 18px;
font-weight: 700;
}
.expenseTitle span {
font-size: 18px;
font-weight: 700;
}
.expenseTitle .totalKoma {
font-size: 15px;
font-weight: 500;
}
.wrapper_content_email {
display: flex;
flex-direction: row;
}
.wrapper_card_email {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
/* display: flex; */
margin-right:20px;
padding:0;
display:inline-block;
}
.wrapper_body_email {
flex-shrink: 0;
}
.wrapper_body_email img {
background: #5186e4;
border-radius: 50%;
padding: 3px;
}
.wrapper_body_from_email {
/* display: block; */
/* flex-direction: column; */
flex-grow: 1;
margin-left: 3px;
}
.wrapper_body_from_email .from {
font-size: 10px;
}
.wrapper_body_from_email .fromEmail {
font-size: 12px;
font-weight: 700;
}
.wrapper_container_email{
margin:20px 0 20px;
/* display: inline-block; */
}
.chevron {
margin: 10px;
}
.wrapper_content_email p {
font-size: 13px;
font-weight: 600;
}
.wrapper_content_email span {
font-size: 11px;
}
.totalReport {
text-align: start;
font-weight: 700;
}
.mealsKoma {
font-size: 12px;
}
.wrapper_notes {
display: block;
flex-direction: column;
text-align: right;
padding-right;
}
.wrapper_notes span {
font-size: 10px;
padding-right:10px;
text-align:right;
}
.wrapper_content_report {
display: flex;
flex-direction: column;
margin: 10px 0 10px;
}
.wrapper_content_report span {
font-size: 10px;
}
.column_content {
background: white;
border: 1px solid #adadad;
box-shadow: -3px 10px 5px 0px rgba(235, 235, 235, 0.75);
-webkit-box-shadow: -3px 10px 5px 0px rgba(235, 235, 235, 0.75);
-moz-box-shadow: -3px 10px 5px 0px rgba(235, 235, 235, 0.75);
border-radius: 5px;
margin-right: 10px;
overflow: hidden;
margin-top:20px;
}
.column_content img{
border-top-left-radius: 5px; border-top-right-radius: 5px;
}
.column_card{
padding: 0 13px 0;
}
.column_card span{
font-size:9px;
}
.wrapper_container_footer{
display: flex; align-items:center; justify-content:start;padding-left:20px;padding-top:20px;
}
.wrapper_content_footer{
display:flex;justify-content:end; align-items:center;
}
.wrapper_footer{
position: relative;
}
.wrapper_closed_text{
display:flex; align-items:center; justify-content:space-between;
}
.wrapper_closed_text td:nth-child(1){
font-size:17px;padding-left:0px;font-weight:700;
}
.wrapper_closed_text td:nth-child(2){
font-size:17px;padding-left:0px;font-weight:700;text-align:right;
}
/* .wrapper_closed_text table,tr {
border:none !important;
} */
.prevNext {
text-align: justify;
/* border: 1px solid #ccc; */
padding:0 !important;
margin-bottom:-10px;
}
.prevNext p {
display: inline-block;
position: relative;
top: 1.2em;
padding:0;
font-weight:700;
}
.prevNext:before{
content: '';
display: block;
width: 100%;
margin-bottom: -1.2em;
}
.prevNext:after {
content: '';
display: inline-block;
width: 100%;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Report File</title>
<script src="https://kit.fontawesome.com/5c2c5b6638.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container" width="1240">
<div class="wrapper_footer">
<div class="wrapper_container_footer">
<div class="wrapper_content_footer">
<span>
<img src="" class="" width="130"
alt="">
</span>
</div>
</div>
</div>
<div class="wrapper">
<div class="prevNext">
<p class="prev">Expense Report 2022-10-09</p>
<p class="next">Rp 300,000.00</p>
</div>
<hr>
<div class="wrapper_container_email">
<div class="wrapper_content_email">
<div class="wrapper_card_email">
<div class="wrapper_body_from_email">
<span class="from">From
<p class="fromEmail">[email protected]</p>
</span>
</div>
</div>
{{-- <div class="chevron">
<a href="">
<i class="fa-sharp fa-solid fa-chevron-right"></i>
</a>
</div> --}}
<div class="wrapper_card_email">
<div class="wrapper_body_from_email">
<span class="from">To
<p class="fromEmail">[email protected]</p>
</span>
</div>
</div>
<div class="wrapper_card_email">
<div class="wrapper_body_from_email">
<span class="from">Date
<p class="fromEmail">2022-10-09</p>
</span>
</div>
</div>
</div>
</div>
<div class="wrapper_container_email">
<div class="wrapper_content_email">
<p class="mealsEntertainment">Meals and Entertainment - Rp
300,000.<span class="mealsKoma">00</span></p>
</div>
</div>
<div class="">
<div class="table-responsive">
<table>
<thead>
<tr>
<th scope="col ">Date
</th>
<th scope="col ">
Merchant</th>
<th scope="col ">
Expense Type</th>
<th scope="col ">Total
</th>
</tr>
</thead>
<tbody>
@for ($i = 0; $i <= 1; $i++)
<tr>
<td class="text-sm" data-label="Date">
2022-10-09</td>
<td class="text-sm" data-label="Merchant">
Burger King</td>
<td class="text-sm" data-label="Amount">Meals
</td>
<td class="text-sm" data-label="Expense">Rp
300,000.<span class="mealsKoma">00</span></td>
</tr>
@endfor
<tr>
<td colspan="3"></td>
<td class="totalReport">
Rp
300,000.<span class="mealsKoma">00</span></td>
</tr>
</tbody>
</table>
</div>
<div class="col-md">
<div class="row">
<div class="col-md">
</div>
<div class="wrapper_notes" align="end">
<span class="">Notes</span>
<span class="">*The information on this receipt was
manually entered. Please
verify fo authenticity.</span>
</div>
</div>
</div>
<div class="col-md">
<div class="wrapper_content_report">
<span class="infoReport">Oct 09, at 5.25 PM UTC+07:00</span>
<span class="infoReport">You created this report</span>
</div>
<div class="wrapper_content_report">
<span class="infoReport">Oct 09, at 5.25 PM UTC+07:00</span>
<span class="infoReport">You submitted this report (automatically
closed due
to submit-only policy) to you (cc: [email protected])</span>
</div>
</div>
<hr>
<div class="row">
<div class="column">
<div class="column_content">
<img src="{{ asset('img/receipt/receipt.jpg') }}" class="img-fluid imgImage" alt="">
<div class="column_card">
<span class="col-md cardReport">Date</span>
<span class="col-md cardReport"> :2022-10-09</span>
</div>
<div class="column_card">
<span class="col-md cardReport">Merchant</span>
<span class="col-md cardReport"> :Burger King</span>
</div>
<div class="column_card">
<span class="col-md cardReport">Total</span>
<span class="col-md cardReport"> :Rp 300,000.00</span>
</div>
<div class="column_card">
<span class="col-md cardReport">Expense Type:</span>
<span class="col-md cardReport"> :Meals</span>
</div>
</div>
</div>
<div class="column">
<div class="column_content">
<img src="{{ asset('img/receipt/receipt.jpg') }}" class="img-fluid imgImage" alt="">
<div class="column_card">
<span class="col-md cardReport">Date</span>
<span class="col-md cardReport"> :2022-10-09</span>
</div>
<div class="column_card">
<span class="col-md cardReport">Merchant</span>
<span class="col-md cardReport"> :Burger King</span>
</div>
<div class="column_card">
<span class="col-md cardReport">Total</span>
<span class="col-md cardReport"> :Rp 300,000.00</span>
</div>
<div class="column_card">
<span class="col-md cardReport">Expense Type:</span>
<span class="col-md cardReport"> :Meals</span>
</div>
</div>
</div>
<div class="column">
<div class="column_content">
<img src="{{ asset('img/receipt/receipt.jpg') }}" class="img-fluid imgImage"
alt="">
<div class="column_card">
<span class="col-md cardReport">Date</span>
<span class="col-md cardReport"> :2022-10-09</span>
</div>
<div class="column_card">
<span class="col-md cardReport">Merchant</span>
<span class="col-md cardReport"> :Burger King</span>
</div>
<div class="column_card">
<span class="col-md cardReport">Total</span>
<span class="col-md cardReport"> :Rp 300,000.00</span>
</div>
<div class="column_card">
<span class="col-md cardReport">Expense Type:</span>
<span class="col-md cardReport"> :Meals</span>
</div>
</div>
</div>
<div class="column">
<div class="column_content">
<img src="{{ asset('img/receipt/receipt.jpg') }}" class="img-fluid imgImage"
alt="">
<div class="column_card">
<span class="col-md cardReport">Date</span>
<span class="col-md cardReport"> :2022-10-09</span>
</div>
<div class="column_card">
<span class="col-md cardReport">Merchant</span>
<span class="col-md cardReport"> :Burger King</span>
</div>
<div class="column_card">
<span class="col-md cardReport">Total</span>
<span class="col-md cardReport"> :Rp 300,000.00</span>
</div>
<div class="column_card">
<span class="col-md cardReport">Expense Type:</span>
<span class="col-md cardReport"> :Meals</span>
</div>
</div>
</div>
<div class="column">
<div class="column_content">
<img src="{{ asset('img/receipt/receipt.jpg') }}" class="img-fluid imgImage"
alt="">
<div class="column_card">
<span class="col-md cardReport">Date</span>
<span class="col-md cardReport"> :2022-10-09</span>
</div>
<div class="column_card">
<span class="col-md cardReport">Merchant</span>
<span class="col-md cardReport"> :Burger King</span>
</div>
<div class="column_card">
<span class="col-md cardReport">Total</span>
<span class="col-md cardReport"> :Rp 300,000.00</span>
</div>
<div class="column_card">
<span class="col-md cardReport">Expense Type:</span>
<span class="col-md cardReport"> :Meals</span>
</div>
</div>
</div>
<div class="column">
<div class="column_content">
<img src="{{ asset('img/receipt/receipt.jpg') }}" class="img-fluid imgImage"
alt="">
<div class="column_card">
<span class="col-md cardReport">Date</span>
<span class="col-md cardReport"> :2022-10-09</span>
</div>
<div class="column_card">
<span class="col-md cardReport">Merchant</span>
<span class="col-md cardReport"> :Burger King</span>
</div>
<div class="column_card">
<span class="col-md cardReport">Total</span>
<span class="col-md cardReport"> :Rp 300,000.00</span>
</div>
<div class="column_card">
<span class="col-md cardReport">Expense Type:</span>
<span class="col-md cardReport"> :Meals</span>
</div>
</div>
</div>
<div class="column">
<div class="column_content">
<img src="{{ asset('img/receipt/receipt.jpg') }}" class="img-fluid imgImage"
alt="">
<div class="column_card">
<span class="col-md cardReport">Date</span>
<span class="col-md cardReport"> :2022-10-09</span>
</div>
<div class="column_card">
<span class="col-md cardReport">Merchant</span>
<span class="col-md cardReport"> :Burger King</span>
</div>
<div class="column_card">
<span class="col-md cardReport">Total</span>
<span class="col-md cardReport"> :Rp 300,000.00</span>
</div>
<div class="column_card">
<span class="col-md cardReport">Expense Type:</span>
<span class="col-md cardReport"> :Meals</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous">
</script>
</body>
</html>