L'affichage du print() fonctionne bien sur Chrome mais pas Firefox
lunok
Bonjour à tous,
je souhaite simplement imprimer une page html via la fonction JS window.print();
Sous le navigateur Chrome l'affichage est correct, chaque "partie" se trouve sur une page :
https://ibb.co/m0Lq5Gb
Mais sous Firefox, il arrive qu'une partie soit entre deux pages (ce qui n'est pas voulu) :
https://ibb.co/26bbYSQ
Voici le CSS
.break-text {
height: 100%!important;
word-wrap: break-word;
}
/* Printable part */
body {
margin: 0;
padding: 0;
background-color: white;
font: 10pt "Arial";
}
h1 {
padding: .25cm;
margin: .5cm 0;
color: white;
font-size: 14pt;
font-weight: bolder;
text-align: center;
background-color: #00b8d4;
border-radius: 5px;
text-transform: uppercase;
}
h2 {
padding: 0;
margin: 1cm 0 .5cm 0;
color: #333;
font-size: 12pt;
font-weight: bolder;
border-bottom: 1px solid #ccc;
}
hr {
border: 1px solid #ccc;
margin: 25px 0;
}
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.page {
width: 21cm;
min-height: 25.7cm;
padding: .5cm 1cm;
margin: 1cm auto;
border: 1px #d3d3d3 solid;
border-radius: 5px;
background: white;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
}
.page-content {
padding: 0 .5cm;
/* Force background elements to be printable */
-webkit-print-color-adjust: exact;
ul > li {
list-style-type: circle !important;
}
}
.crk-chips {
position: relative;
margin: 0 auto;
text-align: center;
color: white;
font-family: monospace;
font-size: 1.2em;
img {
width:105px;
height:40px;
}
.crk-chips-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
@page {
size: A4;
margin: 1cm 0;
}
@media print {
.page {
margin: 0;
/*padding: 0 .25cm;*/
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
.page-break {
clear: both;
page-break-after: always;
min-height: 1px;
}
div[aria-live], .corner-ribbon {
display: none;
}
}Voic l'HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>XXXX</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Copse&display=swap">
<link rel="stylesheet" href="/build/print_promo_codes.css">
</head>
<body>
<header>
</header>
<main>
<main class="page" style="display: grid;">
<section class="page-content">
<h1>Votre coupon</h1>
<br>
<div class="row">
<div class="col s12 center-align">
<img src="https://xx.xx.xx/xx/924_381147e1a05e99be028a0d06dcf94fd43c9ec8f2.png" width="50"
alt="Logo">
</div>
</div>
<div class="row">
<div class="col s12">
<div class="card card-track hoverable" style="max-width:60%;margin: auto">
<div class="card-image">
<img src="/img/_partials/defaultTrackCover.jpg"
style="object-fit: cover;"
alt="cover track">
<p class="card-title truncate">Renseignez un titre</p>
</div>
<div class="card-content">
<p>Renseignez une description</p>
<hr />
<p class="guest-name center-align">
<strong>
Guest-OLYYK9
</strong>
</p>
<hr />
<div class="row center-align">
<div class="col s6">
<div class="crk-chips">
<img src="/img/desktop/guide/print_chips.png" alt="" />
<div class="crk-chips-text">OLYYK9</div>
</div>
https://xx.xx.xx/OLYYK9
</div>
<div class="col s6">
<div id="qrcode-OLYYK9" style="display: inline-block;"></div>
<script type="text/javascript">
makeQRCode("qrcode-OLYYK9", "https://xx.xx.xx/OLYYK9");
</script>
</div>
</div>
<div class="row">
<div class="col s12">
<p>Validité :
<strong><span>19/06/2021 12:00</span></strong>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<h2>Comment utiliser ce coupon ?</h2>
<ul>
<li>Rendez-vous sur le lieu de votre aventure</li>
<li>Scannez le QR code ou saisissez l'adresse web dans votre navigateur mobile</li>
<li>S'il vous est demandé d'activer votre GPS, cliquez sur "Autoriser"</li>
<li>Ca y est ! Vous êtes prêts à démarrer !</li>
</ul>
<p><strong>Conseil :</strong> Pensez à recharger complètement votre smartphone avant de débuter votre aventure.</p>
</div>
</div>
<div class="page-break"></div>
<h1>Votre coupon</h1>
<br>
<div class="row">
<div class="col s12 center-align">
<img src="https://xx.xx.xx/xx/924_381147e1a05e99be028a0d06dcf94fd43c9ec8f2.png" width="50"
alt="Logo">
</div>
</div>
<div class="row">
<div class="col s12">
<div class="card card-track hoverable" style="max-width:60%;margin: auto">
<div class="card-image">
<img src="/img/_partials/defaultTrackCover.jpg"
style="object-fit: cover;"
alt="cover track">
<p class="card-title truncate">Renseignez un titre</p>
</div>
<div class="card-content">
<p>Renseignez une description</p>
<hr />
<p class="guest-name center-align">
<strong>
Guest-451BZB
</strong>
</p>
<hr />
<div class="row center-align">
<div class="col s6">
<div class="crk-chips">
<img src="/img/desktop/guide/print_chips.png" alt="" />
<div class="crk-chips-text">451BZB</div>
</div>
https://xx.xx.xx/451BZB
</div>
<div class="col s6">
<div id="qrcode-451BZB" style="display: inline-block;"></div>
<script type="text/javascript">
makeQRCode("qrcode-451BZB", "https://xx.xx.xx/451BZB");
</script>
</div>
</div>
<div class="row">
<div class="col s12">
<p>Validité :
<strong><span>19/06/2021 12:00</span></strong>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<h2>Comment utiliser ce coupon ?</h2>
<ul>
<li>Rendez-vous sur le lieu de votre aventure</li>
<li>Scannez le QR code ou saisissez l'adresse web dans votre navigateur mobile</li>
<li>S'il vous est demandé d'activer votre GPS, cliquez sur "Autoriser"</li>
<li>Ca y est ! Vous êtes prêts à démarrer !</li>
</ul>
<p><strong>Conseil :</strong> Pensez à recharger complètement votre smartphone avant de débuter votre aventure.</p>
</div>
</div>
<div class="page-break"></div>
<h1>Votre coupon</h1>
<br>
<div class="row">
<div class="col s12 center-align">
<img src="https://xx.xx.xx/xx/924_381147e1a05e99be028a0d06dcf94fd43c9ec8f2.png" width="50"
alt="Logo">
</div>
</div>
<div class="row">
<div class="col s12">
<div class="card card-track hoverable" style="max-width:60%;margin: auto">
<div class="card-image">
<img src="/img/_partials/defaultTrackCover.jpg"
style="object-fit: cover;"
alt="cover track">
<p class="card-title truncate">Renseignez un titre</p>
</div>
<div class="card-content">
<p>Renseignez une description</p>
<hr />
<p class="guest-name center-align">
<strong>
xxxx
xxx
</strong>
</p>
<hr />
<div class="row center-align">
<div class="col s6">
<div class="crk-chips">
<img src="/img/desktop/guide/print_chips.png" alt="" />
<div class="crk-chips-text">SJ04H0</div>
</div>
https://xx.xx.xx/SJ04H0
</div>
<div class="col s6">
<div id="qrcode-SJ04H0" style="display: inline-block;"></div>
<script type="text/javascript">
makeQRCode("qrcode-SJ04H0", "https://x.xxxx.xxx/SJ04H0");
</script>
</div>
</div>
<div class="row">
<div class="col s12">
<p>Validité :
<strong><span>18/06/2021 12:00</span></strong>
<span>au</span>
<strong><span>19/06/2021 12:00</span></strong>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<h2>Comment utiliser ce coupon ?</h2>
<ul>
<li>Rendez-vous sur le lieu de votre aventure</li>
<li>Scannez le QR code ou saisissez l'adresse web dans votre navigateur mobile</li>
<li>S'il vous est demandé d'activer votre GPS, cliquez sur "Autoriser"</li>
<li>Ca y est ! Vous êtes prêts à démarrer !</li>
</ul>
<p><strong>Conseil :</strong> Pensez à recharger complètement votre smartphone avant de débuter votre aventure.</p>
</div>
</div>
<div class="page-break"></div>
</section>
</main>
</main>
<script>
$(document).ready(function() {
window.print();
});
</script>
</body>
</html>La classe css .page-break est utilisée après chaque nouvelle partie dans le foreach.
Quelqu'un a t-il déjà eu se problème et aurait une piste pour le résoudre ?
Je vous remercie d'avance.