Issues adding page break in row element
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 class="container">
<div class="row">
<div class="col col-12">
<div>
<center>
<h1>Equipe KIDS</h1>
</center>
</div>
</div>
</div>
<div class="row">
<div class="col col-4">
<center>
<div class="v-avatar" style="height: 96px; min-width: 96px; width: 96px;">
<div class="v-image v-responsive theme--light">
<div class="v-responsive__sizer" style="padding-bottom: 100%;"></div>
<div class="v-image__image v-image__image--cover" style="background-image: url("https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg"); background-position: center center;"></div>
<div class="v-responsive__content" style="width: 400px;"></div>
</div>
</div>
<br>
<h5><b>nome</b><br>
21/01/2012<br>
escola
</h5>
</center>
</div>
<div class="col col-4">
<center>
<div class="v-avatar" style="height: 96px; min-width: 96px; width: 96px;">
<div class="v-image v-responsive theme--light">
<div class="v-responsive__sizer" style="padding-bottom: 100%;"></div>
<div class="v-image__image v-image__image--cover" style="background-image: url("https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg"); background-position: center center;"></div>
<div class="v-responsive__content" style="width: 400px;"></div>
</div>
</div>
<br>
<h5><b>nome</b><br>
21/01/2012<br>
escola
</h5>
</center>
</div>
<div class="col col-4">
<center>
<div class="v-avatar" style="height: 96px; min-width: 96px; width: 96px;">
<div class="v-image v-responsive theme--light">
<div class="v-responsive__sizer" style="padding-bottom: 100%;"></div>
<div class="v-image__image v-image__image--cover" style="background-image: url("https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg"); background-position: center center;"></div>
<div class="v-responsive__content" style="width: 400px;"></div>
</div>
</div>
<br>
<h5><b>nome</b><br>
21/01/2012<br>
escola
</h5>
</center>
</div>
<div class="col col-4">
<center>
<div class="v-avatar" style="height: 96px; min-width: 96px; width: 96px;">
<div class="v-image v-responsive theme--light">
<div class="v-responsive__sizer" style="padding-bottom: 100%;"></div>
<div class="v-image__image v-image__image--cover" style="background-image: url("https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg"); background-position: center center;"></div>
<div class="v-responsive__content" style="width: 400px;"></div>
</div>
</div>
<br>
<h5><b>nome</b><br>
21/01/2012<br>
escola
</h5>
</center>
</div>
<div class="col col-4">
<center>
<div class="v-avatar" style="height: 96px; min-width: 96px; width: 96px;">
<div class="v-image v-responsive theme--light">
<div class="v-responsive__sizer" style="padding-bottom: 100%;"></div>
<div class="v-image__image v-image__image--cover" style="background-image: url("https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg"); background-position: center center;"></div>
<div class="v-responsive__content" style="width: 400px;"></div>
</div>
</div>
<br>
<h5><b>nome</b><br>
21/01/2012<br>
escola
</h5>
</center>
</div>
<div class="col col-4">
<center>
<div class="v-avatar" style="height: 96px; min-width: 96px; width: 96px;">
<div class="v-image v-responsive theme--light">
<div class="v-responsive__sizer" style="padding-bottom: 100%;"></div>
<div class="v-image__image v-image__image--cover" style="background-image: url("https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg"); background-position: center center;"></div>
<div class="v-responsive__content" style="width: 400px;"></div>
</div>
</div>
<br>
<h5><b>nome</b><br>
21/01/2012<br>
escola
</h5>
</center>
</div>
<div class="col col-4">
<center>
<div class="v-avatar" style="height: 96px; min-width: 96px; width: 96px;">
<div class="v-image v-responsive theme--light">
<div class="v-responsive__sizer" style="padding-bottom: 100%;"></div>
<div class="v-image__image v-image__image--cover" style="background-image: url("https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg"); background-position: center center;"></div>
<div class="v-responsive__content" style="width: 400px;"></div>
</div>
</div>
<br>
<h5><b>nome</b><br>
21/01/2012<br>
escola
</h5>
</center>
</div>
<div class="col col-4">
<center>
<div class="v-avatar" style="height: 96px; min-width: 96px; width: 96px;">
<div class="v-image v-responsive theme--light">
<div class="v-responsive__sizer" style="padding-bottom: 100%;"></div>
<div class="v-image__image v-image__image--cover" style="background-image: url("https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg"); background-position: center center;"></div>
<div class="v-responsive__content" style="width: 400px;"></div>
</div>
</div>
<br>
<h5><b>nome</b><br>
21/01/2012<br>
escola
</h5>
</center>
</div>
<div class="col col-4">
<center>
<div class="v-avatar" style="height: 96px; min-width: 96px; width: 96px;">
<div class="v-image v-responsive theme--light">
<div class="v-responsive__sizer" style="padding-bottom: 100%;"></div>
<div class="v-image__image v-image__image--cover" style="background-image: url("https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg"); background-position: center center;"></div>
<div class="v-responsive__content" style="width: 400px;"></div>
</div>
</div>
<br>
<h5><b>nome</b><br>
21/01/2012<br>
escola
</h5>
</center>
</div>
<div class="col col-4">
<center>
<div class="v-avatar" style="height: 96px; min-width: 96px; width: 96px;">
<div class="v-image v-responsive theme--light">
<div class="v-responsive__sizer" style="padding-bottom: 100%;"></div>
<div class="v-image__image v-image__image--cover" style="background-image: url("https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg"); background-position: center center;"></div>
<div class="v-responsive__content" style="width: 400px;"></div>
</div>
</div>
<br>
<h5><b>nome</b><br>
21/01/2012<br>
escola
</h5>
</center>
</div>
<div class="col col-4">
<center>
<div class="v-avatar" style="height: 96px; min-width: 96px; width: 96px;">
<div class="v-image v-responsive theme--light">
<div class="v-responsive__sizer" style="padding-bottom: 100%;"></div>
<div class="v-image__image v-image__image--cover" style="background-image: url("https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg"); background-position: center center;"></div>
<div class="v-responsive__content" style="width: 400px;"></div>
</div>
</div>
<br>
<h5><b>nome</b><br>
21/01/2012<br>
escola
</h5>
</center>
</div>
<div class="col col-4">
<center>
<div class="v-avatar" style="height: 96px; min-width: 96px; width: 96px;">
<div class="v-image v-responsive theme--light">
<div class="v-responsive__sizer" style="padding-bottom: 100%;"></div>
<div class="v-image__image v-image__image--cover" style="background-image: url("https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg"); background-position: center center;"></div>
<div class="v-responsive__content" style="width: 400px;"></div>
</div>
</div>
<br>
<h5><b>nome - 12</b><br>
21/01/2012<br>
escola
</h5>
</center>
</div>
<p></p>
<div class="col col-4">
<center>
<div class="v-avatar" style="height: 96px; min-width: 96px; width: 96px;">
<div class="v-image v-responsive theme--light">
<div class="v-responsive__sizer" style="padding-bottom: 100%;"></div>
<div class="v-image__image v-image__image--cover" style="background-image: url("https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg"); background-position: center center;"></div>
<div class="v-responsive__content" style="width: 400px;"></div>
</div>
</div>
<br>
<h5><b>nome</b><br>
21/01/2012<br>
escola
</h5>
</center>
</div>
<div class="col col-4">
<center>
<div class="v-avatar" style="height: 96px; min-width: 96px; width: 96px;">
<div class="v-image v-responsive theme--light">
<div class="v-responsive__sizer" style="padding-bottom: 100%;"></div>
<div class="v-image__image v-image__image--cover" style="background-image: url("https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg"); background-position: center center;"></div>
<div class="v-responsive__content" style="width: 400px;"></div>
</div>
</div>
<br>
<h5><b>nome</b><br>
21/01/2012<br>
escola
</h5>
</center>
</div>
<div class="col col-4">
<center>
<div class="v-avatar" style="height: 96px; min-width: 96px; width: 96px;">
<div class="v-image v-responsive theme--light">
<div class="v-responsive__sizer" style="padding-bottom: 100%;"></div>
<div class="v-image__image v-image__image--cover" style="background-image: url("https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg"); background-position: center center;"></div>
<div class="v-responsive__content" style="width: 400px;"></div>
</div>
</div>
<br>
<h5><b>nome</b><br>
21/01/2012<br>
escola
</h5>
</center>
</div>
<div class="col col-4">
<center>
<div class="v-avatar" style="height: 96px; min-width: 96px; width: 96px;">
<div class="v-image v-responsive theme--light">
<div class="v-responsive__sizer" style="padding-bottom: 100%;"></div>
<div class="v-image__image v-image__image--cover" style="background-image: url("https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg"); background-position: center center;"></div>
<div class="v-responsive__content" style="width: 400px;"></div>
</div>
</div>
<br>
<h5><b>nome</b><br>
21/01/2012<br>
escola
</h5>
</center>
</div>
<div class="col col-4">
<center>
<div class="v-avatar" style="height: 96px; min-width: 96px; width: 96px;">
<div class="v-image v-responsive theme--light">
<div class="v-responsive__sizer" style="padding-bottom: 100%;"></div>
<div class="v-image__image v-image__image--cover" style="background-image: url("https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg"); background-position: center center;"></div>
<div class="v-responsive__content" style="width: 400px;"></div>
</div>
</div>
<br>
<h5><b>nome</b><br>
21/01/2012<br>
escola
</h5>
</center>
</div>
<div class="col col-4">
<center>
<div class="v-avatar" style="height: 96px; min-width: 96px; width: 96px;">
<div class="v-image v-responsive theme--light">
<div class="v-responsive__sizer" style="padding-bottom: 100%;"></div>
<div class="v-image__image v-image__image--cover" style="background-image: url("https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg"); background-position: center center;"></div>
<div class="v-responsive__content" style="width: 400px;"></div>
</div>
</div>
<br>
<h5><b>nome</b><br>
21/01/2012<br>
escola
</h5>
</center>
</div>
<div class="col col-4">
<center>
<div class="v-avatar" style="height: 96px; min-width: 96px; width: 96px;">
<div class="v-image v-responsive theme--light">
<div class="v-responsive__sizer" style="padding-bottom: 100%;"></div>
<div class="v-image__image v-image__image--cover" style="background-image: url("https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg"); background-position: center center;"></div>
<div class="v-responsive__content" style="width: 400px;"></div>
</div>
</div>
<br>
<h5><b>nome</b><br>
21/01/2012<br>
escola
</h5>
</center>
</div>
<div class="col col-4">
<center>
<div class="v-avatar" style="height: 96px; min-width: 96px; width: 96px;">
<div class="v-image v-responsive theme--light">
<div class="v-responsive__sizer" style="padding-bottom: 100%;"></div>
<div class="v-image__image v-image__image--cover" style="background-image: url("https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg"); background-position: center center;"></div>
<div class="v-responsive__content" 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:
Already played a lot with @media print, having all elements s display: block, but nothing seems to solve it. Any ideas? Cheers
Gines
Solution
I was able to fix the issue changing the container structure for a simple table structure.
Thanks!
- Making a img appear/disappear in html5
- Bootstrap label overlay
- Ant Design Table with vertical and horizontal scroll
- Change Style/Look of Asp:CheckBox using CSS
- Two div blocks on same line
- Applying zoom into point like Aseprite
- How to get color value from gradient by percentage with javascript?
- How can I hover over text and change the hover state of an SVG
- Moving mat-icon to left of expansion panel header title?
- CSS: deepest in DOM priority
- How do I position the buttons at the bottom in the q-input field?
- Where do I get a "3 horizontal lines" symbol for my webpage?
- Add Animation/Transition to Element When Removed From DOM
- CSS text-overflow: ellipsis; not working?
- Hiding Google Translate bar
- border-box of input not working as expected
- Typescript error "Property 'value' does not exist on type 'HTMLElement'", "Property 'onclick' does not exist on type 'Element'"
- How to remove the text-decoration underline; from the span element inside the flex parent?
- What's so bad about in-line CSS?
- Is the khtml prefix necessary?
- Position Flex parent to always be at the bottom of the page
- Bootstrap tabs in Chrome extension popup
- <mat-toolbar> changes height of all page
- Line separators between elements in flexbox
- How can I use an Angular Material Icon without additional spacing?
- Fixed element positioning relative to its parent
- CSS - apply mobile pattern also on desktop when parent container is small
- How to add a shadow under a navbar using CSS?
- Flexbox Responsive Images not shrinking
- Make full screen pop up responsive