Bonjour,

Je dois imprimer une page html/CSS.

Jusque là, aucun problème. Par contre, ma page est composée à un moment de cette arborescence de div :

div.cases_container

    case

        img

        p

avec plusieurs cases. Je peux faire rentrer environ 6 cases dans une page une fois imprimée. Par contre, lorsque je veux en ajouter plus (c'est dynamique géré avec du php), lors de l'impression les 6+ cases sont cachées à la fin de ma page, même si la balises parente a une hauteur en pixels plus haute qu'une page A4.

Je ne suis pas sûr de m'être bien exprimé, voilà une petite image pour illustrer

Voilà ce que ça donne :

            .cases_container{
                width: 100%;
/*                 display: none !important; */
                page-break-after: avoid;
                /* position:relative; */
                /* height: 100%; */
                page-break-before: auto; /* 'always,' 'avoid,' 'left,' 'inherit,' or 'right' */
                page-break-after: auto; /* 'always,' 'avoid,' 'left,' 'inherit,' or 'right' */
                page-break-inside: avoid; /* or 'auto' */
                                position: static;     overflow: visible;
                height: 10000px;
            } 
            .case{
                width: 45% !important;
                flex-wrap: wrap; 
/*                 page-break-after: always; */
/*                 height: 500px; */
            }
            h4{
                width: 100%;
            }
            img {
                page-break-before: auto; /* 'always,' 'avoid,' 'left,' 'inherit,' or 'right' */
                page-break-after: auto; /* 'always,' 'avoid,' 'left,' 'inherit,' or 'right' */
                page-break-inside: avoid; /* or 'auto' */
            }

<div class="cadre fixations">
<h2>TITRE</h2>
<div class="cases_container">
<div class="case">
<img src="local" alt="">
<p>Description</p>
</div>
<div class="case">
<img src="local" alt="">
<p>Description</p>
</div>
<div class="case">
<img src="local" alt="">
<p>Description</p>
</div><div class="case">
<img src="local" alt="">
<p>Description</p>
</div><div class="case">
<img src="local" alt="">
<p>Description</p>
</div>
</div>

Merci de votre aide

N'hésitez pas à demander plus de précisions si il en manque.

PS: j'ai déjà testé pas mal de forums :

https://stackoverflow.com/questions/2649169/print-styles-how-to-ensure-image-doesnt-span-a-page-break

https://www.appnovation.com/blog/how-avoid-your-web-printing-page-being-cut

https://developer.mozilla.org/fr/docs/Web/CSS/page-break-inside

-
Edité par Mriic 14 novembre 2018 à 14:16:25

Attention les <br> ne servent pas à faire la mise en page ! Et qui plus est tu imposes un width à 45% donc forcement ca bug si t'en veux plus sur une page.

Les br sont rajoutés par l'éditeur wysiwyg. (je bosse sur magento 2 actuellement)

Je ne comprend pas le rapport avec le width et le fait que ça ne s'affiche pas sur une autre page. Le 45 % me permet d'afficher deux blocs l'un à côté de l'autre.

De plus, j'ai testé aussi en mettant width 100%, donc le bloc avec l'image prenait toute la largeur, mais ce qui dépassait de la première page restait invisible.

J'ai essayé sans css, et aucune image n'est cachée... Est-ce que ça vient d'une autre partie de mon css ?

  .first.cadre{
        margin-top: 50px;
    }
        .cadre{
            background-color:white;
            border: 1px solid #CCCCCC;
            margin-bottom: 10px;
            padding: 15px 7px;
        }
        h4{
            width: 100%;
        }
        
        div.cadre.guide_pose h4, div.cadre.guide_pose h3{
            margin: 15px 0px 10px 0;
            color: #AD6936;
            font-weight: normal;
        }

        div.cadre.fixations{
            background-color: #F9F9F6;
            border: 1px solid #CCCCCC;
            margin-bottom: 10px;
            padding: 15px 7px;
        }
        
        img.intext{
            float:right;
            top: 0;
            right: 0;
            max-width: 20%;
        }
        .cadre.fixations .cases_container{
            display: flex;
            flex-wrap: wrap;
        }
        .cadre.fixations .cases_container .case{
            display:block;
            border: 1px solid #CCCCCC;
            margin-bottom: 10px;
            padding: 15px 7px;
            flex-wrap: wrap; 
            width: 48%;
            text-align: center;
        }

        .cadre.fixations .cases_container .case img{
            width: 90%;
            margin: auto;
        }


        /* @media print{
            .cadre{
                padding: 0% 0% !important;
            }

            .cadre.fixations .cases_container {
               display: none;
            } 
        } */
        @media screen and (max-width: 640px){
            img.intext{
                float:inherit;
                top: 0;
                right: 0;
                width: 60% !important;
                max-width: 60% !important;
            }
            .cadre.fixations .cases_container .case{
                max-width: 100% !important;
                width: 100% !important;
            }
        }
        /* @media all{
            *{
                display:none;
            }
         } */
         
         @media print{
            body, html{
                width: 100%;
            }
            
            *{
                display:block;
                overflow: visible;
            }
            .cadre{
                page-break-after: avoid;
            }
            .cases_container{
                width: 100%;
/*                 display: none !important; */
                page-break-after: avoid;
                /* position:relative; */
                /* height: 100%; */
                page-break-before: auto; /* 'always,' 'avoid,' 'left,' 'inherit,' or 'right' */
                page-break-after: auto; /* 'always,' 'avoid,' 'left,' 'inherit,' or 'right' */
                page-break-inside: avoid; /* or 'auto' */
                                position: static;     overflow: visible;
            } 
            .case{
                width: 45% !important;
                flex-wrap: wrap; 
                page-break-after: avoid;
            }
            h4{
                width: 100%;
            }
            img {
                page-break-before: auto; /* 'always,' 'avoid,' 'left,' 'inherit,' or 'right' */
                page-break-after: auto; /* 'always,' 'avoid,' 'left,' 'inherit,' or 'right' */
                page-break-inside: avoid; /* or 'auto' */
            }

         }

Salut, si je peux te donner un conseil, lorsque tu fais du print, prends les valeurs de ton gabarit (ici A4) en pixel que tu appliques à ton container, et fait toute ta mise en page avec des pixels, pas besoin d'utiliser de media ou quoi que ce soit, puisque tu es sur du print et ta feuille A4 a pas besoin d'être responsive
Après sur magento je sais pas, mais j'avais fais ça pour de la génération de pdf avec dompdf. J'espère avoir pu t'aider.
Bon courage

haaaa ! Je vais tout mettre en pixels, ça va peut peut-être corriger mon problème.

J'utilise un petit mobule qui utilise lui aussi dompdf.

Merci pour le conseil.

Hésite pas à passer le sujet en résolu si ça a fonctionné pour ton problème

J'ai tout fait en pixels, et l'apparence est légèrement différente de ce que je voulais initalement. Mais globalement ça a marché, même si je ne suis pas sûr d'où vient le problème.

Je crois que c'est le display de cases_container qui fait tout foirer, mais je n'en suis pas sûr.

Merci