Home > Mobile >  Issues adding page break in row element
Issues adding page break in row element

Time:10-19

I am dealing with this code for a while and so far was not able to find a solution. I am getting this code from vuejs when printing. My issue is to avoid the page break or if possible insert a page break after the student #12, as I tried in the code. Below you can find the code:

  <!DOCTYPE html>
    <html>
       <head>
          <style>
             .container {
             width: 100%;
             padding: 12px;
             margin-right: auto;
             margin-left: auto;
             height: 100%;
             }
             @media (min-width: 960px) {
             .container {
             max-width: 900px;
             }
             }
             @media (min-width: 1264px) {
             .container {
             max-width: 1185px;
             }
             }
             @media (min-width: 1904px) {
             .container {
             max-width: 1785px;
             }
             }
             .row {
             display: flex;
             flex-wrap: wrap;
             flex: 1 1 auto;
             margin-right: -12px;
             margin-left: -12px;
             }
             .container.fill-height > .row {
             flex: 1 1 100%;
             max-width: calc(100%   24px);
             }
             .v-avatar {
             align-items: center;
             border-radius: 50%;
             display: inline-flex;
             justify-content: center;
             line-height: normal;
             position: relative;
             text-align: center;
             vertical-align: middle;
             overflow: hidden;
             }
             .v-avatar img,
             .v-avatar svg,
             .v-avatar .v-icon,
             .v-avatar .v-image,
             .v-avatar .v-responsive__content {
             border-radius: inherit;
             display: inline-flex;
             height: inherit;
             width: inherit;
             }
             .v-image {
             z-index: 0;
             }
             .v-responsive {
             position: relative;
             overflow: hidden;
             flex: 1 0 auto;
             max-width: 100%;
             display: flex;
             }
             .v-responsive__sizer {
             transition: padding-bottom 0.2s cubic-bezier(0.25, 0.8, 0.5, 1);
             flex: 1 0 0px;
             }
             .v-image__image {
             background-repeat: no-repeat;
             }
             .v-image__image, .v-image__placeholder {
             z-index: -1;
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
             }
             .v-image__image--cover {
             background-size: cover;
             }
             .v-responsive__content {
             flex: 1 0 0px;
             max-width: 100%;
             }
             .col-12 {
             width: 100%;
             padding: 12px;
             }
             .col-4 {
             flex: 0 0 33.3333333333%;
             max-width: 33.3333333333%;
             }
             @media print {
             p {
                page-break-after: always;
                }
                }
          </style>
       </head>
       <body>
          <div >
             <div >
                <div >
                   <div>
                      <center>
                         <h1>Equipe KIDS</h1>
                      </center>
                   </div>
                </div>
             </div>
             <div >
                <div >
                   <center>
                      <div  style="height: 96px; min-width: 96px; width: 96px;">
                         <div >
                            <div  style="padding-bottom: 100%;"></div>
                            <div  style="background-image: url(&quot;https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg&quot;); background-position: center center;"></div>
                            <div  style="width: 400px;"></div>
                         </div>
                      </div>
                      <br> 
                      <h5><b>nome</b><br>
                         21/01/2012<br>
                         escola
                      </h5>
                   </center>
                </div>
                <div >
                   <center>
                      <div  style="height: 96px; min-width: 96px; width: 96px;">
                         <div >
                            <div  style="padding-bottom: 100%;"></div>
                            <div  style="background-image: url(&quot;https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg&quot;); background-position: center center;"></div>
                            <div  style="width: 400px;"></div>
                         </div>
                      </div>
                      <br> 
                      <h5><b>nome</b><br>
                         21/01/2012<br>
                         escola
                      </h5>
                   </center>
                </div>
                <div >
                   <center>
                      <div  style="height: 96px; min-width: 96px; width: 96px;">
                         <div >
                            <div  style="padding-bottom: 100%;"></div>
                            <div  style="background-image: url(&quot;https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg&quot;); background-position: center center;"></div>
                            <div  style="width: 400px;"></div>
                         </div>
                      </div>
                      <br> 
                      <h5><b>nome</b><br>
                         21/01/2012<br>
                         escola
                      </h5>
                   </center>
                </div>
                <div >
                   <center>
                      <div  style="height: 96px; min-width: 96px; width: 96px;">
                         <div >
                            <div  style="padding-bottom: 100%;"></div>
                            <div  style="background-image: url(&quot;https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg&quot;); background-position: center center;"></div>
                            <div  style="width: 400px;"></div>
                         </div>
                      </div>
                      <br> 
                      <h5><b>nome</b><br>
                         21/01/2012<br>
                         escola
                      </h5>
                   </center>
                </div>
                <div >
                   <center>
                      <div  style="height: 96px; min-width: 96px; width: 96px;">
                         <div >
                            <div  style="padding-bottom: 100%;"></div>
                            <div  style="background-image: url(&quot;https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg&quot;); background-position: center center;"></div>
                            <div  style="width: 400px;"></div>
                         </div>
                      </div>
                      <br> 
                      <h5><b>nome</b><br>
                         21/01/2012<br>
                         escola
                      </h5>
                   </center>
                </div>
                <div >
                   <center>
                      <div  style="height: 96px; min-width: 96px; width: 96px;">
                         <div >
                            <div  style="padding-bottom: 100%;"></div>
                            <div  style="background-image: url(&quot;https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg&quot;); background-position: center center;"></div>
                            <div  style="width: 400px;"></div>
                         </div>
                      </div>
                      <br> 
                      <h5><b>nome</b><br>
                         21/01/2012<br>
                         escola
                      </h5>
                   </center>
                </div>
                <div >
                   <center>
                      <div  style="height: 96px; min-width: 96px; width: 96px;">
                         <div >
                            <div  style="padding-bottom: 100%;"></div>
                            <div  style="background-image: url(&quot;https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg&quot;); background-position: center center;"></div>
                            <div  style="width: 400px;"></div>
                         </div>
                      </div>
                      <br> 
                      <h5><b>nome</b><br>
                         21/01/2012<br>
                         escola
                      </h5>
                   </center>
                </div>
                <div >
                   <center>
                      <div  style="height: 96px; min-width: 96px; width: 96px;">
                         <div >
                            <div  style="padding-bottom: 100%;"></div>
                            <div  style="background-image: url(&quot;https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg&quot;); background-position: center center;"></div>
                            <div  style="width: 400px;"></div>
                         </div>
                      </div>
                      <br> 
                      <h5><b>nome</b><br>
                         21/01/2012<br>
                         escola
                      </h5>
                   </center>
                </div>
                <div >
                   <center>
                      <div  style="height: 96px; min-width: 96px; width: 96px;">
                         <div >
                            <div  style="padding-bottom: 100%;"></div>
                            <div  style="background-image: url(&quot;https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg&quot;); background-position: center center;"></div>
                            <div  style="width: 400px;"></div>
                         </div>
                      </div>
                      <br> 
                      <h5><b>nome</b><br>
                         21/01/2012<br>
                         escola
                      </h5>
                   </center>
                </div>
                <div >
                   <center>
                      <div  style="height: 96px; min-width: 96px; width: 96px;">
                         <div >
                            <div  style="padding-bottom: 100%;"></div>
                            <div  style="background-image: url(&quot;https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg&quot;); background-position: center center;"></div>
                            <div  style="width: 400px;"></div>
                         </div>
                      </div>
                      <br> 
                      <h5><b>nome</b><br>
                         21/01/2012<br>
                         escola
                      </h5>
                   </center>
                </div>
                <div >
                   <center>
                      <div  style="height: 96px; min-width: 96px; width: 96px;">
                         <div >
                            <div  style="padding-bottom: 100%;"></div>
                            <div  style="background-image: url(&quot;https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg&quot;); background-position: center center;"></div>
                            <div  style="width: 400px;"></div>
                         </div>
                      </div>
                      <br> 
                      <h5><b>nome</b><br>
                         21/01/2012<br>
                         escola
                      </h5>
                   </center>
                </div>
                <div >
                   <center>
                      <div  style="height: 96px; min-width: 96px; width: 96px;">
                         <div >
                            <div  style="padding-bottom: 100%;"></div>
                            <div  style="background-image: url(&quot;https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg&quot;); background-position: center center;"></div>
                            <div  style="width: 400px;"></div>
                         </div>
                      </div>
                      <br> 
                      <h5><b>nome - 12</b><br>
                         21/01/2012<br>
                         escola
                      </h5>
                   </center>
                </div>
                <p></p>
                <div >
                   <center>
                      <div  style="height: 96px; min-width: 96px; width: 96px;">
                         <div >
                            <div  style="padding-bottom: 100%;"></div>
                            <div  style="background-image: url(&quot;https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg&quot;); background-position: center center;"></div>
                            <div  style="width: 400px;"></div>
                         </div>
                      </div>
                      <br> 
                      <h5><b>nome</b><br>
                         21/01/2012<br>
                         escola
                      </h5>
                   </center>
                </div>
                <div >
                   <center>
                      <div  style="height: 96px; min-width: 96px; width: 96px;">
                         <div >
                            <div  style="padding-bottom: 100%;"></div>
                            <div  style="background-image: url(&quot;https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg&quot;); background-position: center center;"></div>
                            <div  style="width: 400px;"></div>
                         </div>
                      </div>
                      <br> 
                      <h5><b>nome</b><br>
                         21/01/2012<br>
                         escola
                      </h5>
                   </center>
                </div>
                <div >
                   <center>
                      <div  style="height: 96px; min-width: 96px; width: 96px;">
                         <div >
                            <div  style="padding-bottom: 100%;"></div>
                            <div  style="background-image: url(&quot;https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg&quot;); background-position: center center;"></div>
                            <div  style="width: 400px;"></div>
                         </div>
                      </div>
                      <br> 
                      <h5><b>nome</b><br>
                         21/01/2012<br>
                         escola
                      </h5>
                   </center>
                </div>
                <div >
                   <center>
                      <div  style="height: 96px; min-width: 96px; width: 96px;">
                         <div >
                            <div  style="padding-bottom: 100%;"></div>
                            <div  style="background-image: url(&quot;https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg&quot;); background-position: center center;"></div>
                            <div  style="width: 400px;"></div>
                         </div>
                      </div>
                      <br> 
                      <h5><b>nome</b><br>
                         21/01/2012<br>
                         escola
                      </h5>
                   </center>
                </div>
                <div >
                   <center>
                      <div  style="height: 96px; min-width: 96px; width: 96px;">
                         <div >
                            <div  style="padding-bottom: 100%;"></div>
                            <div  style="background-image: url(&quot;https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg&quot;); background-position: center center;"></div>
                            <div  style="width: 400px;"></div>
                         </div>
                      </div>
                      <br> 
                      <h5><b>nome</b><br>
                         21/01/2012<br>
                         escola
                      </h5>
                   </center>
                </div>
                <div >
                   <center>
                      <div  style="height: 96px; min-width: 96px; width: 96px;">
                         <div >
                            <div  style="padding-bottom: 100%;"></div>
                            <div  style="background-image: url(&quot;https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg&quot;); background-position: center center;"></div>
                            <div  style="width: 400px;"></div>
                         </div>
                      </div>
                      <br> 
                      <h5><b>nome</b><br>
                         21/01/2012<br>
                         escola
                      </h5>
                   </center>
                </div>
                <div >
                   <center>
                      <div  style="height: 96px; min-width: 96px; width: 96px;">
                         <div >
                            <div  style="padding-bottom: 100%;"></div>
                            <div  style="background-image: url(&quot;https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg&quot;); background-position: center center;"></div>
                            <div  style="width: 400px;"></div>
                         </div>
                      </div>
                      <br> 
                      <h5><b>nome</b><br>
                         21/01/2012<br>
                         escola
                      </h5>
                   </center>
                </div>
                <div >
                   <center>
                      <div  style="height: 96px; min-width: 96px; width: 96px;">
                         <div >
                            <div  style="padding-bottom: 100%;"></div>
                            <div  style="background-image: url(&quot;https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg&quot;); background-position: center center;"></div>
                            <div  style="width: 400px;"></div>
                         </div>
                      </div>
                      <br> 
                      <h5><b>nome</b><br>
                         21/01/2012<br>
                         escola
                      </h5>
                   </center>
                </div>
    
             </div>
          </div>
       </body>
    </html>

I am trying to avoid the following behavior:

Wrong page break insertion

Already played a lot with @media print, having all elements s display: block, but nothing seems to solve it. Any ideas? Cheers

Gines

CodePudding user response:

I was able to fix the issue changing the container structure for a simple table structure.

Thanks!

  • Related