MVC Print Page break not working, contents are cut off - html

Question

I tried below code to break the page while printing however its not working, I learnt that the Page break won't work in nested div tags, I 'm not sure how to achieve this, basically I 'm trying to display images, so in a row there will be 4 or more than that based on the display size of screen however at the time of printing it should print 4 images in a row and the next 4 images should be printed in next page as if now while printing, the images and the contents are getting cut off, please help
<div class='row small'>
#foreach (var item in Model.BuyerList.ImageList)
{
<div class="card bg-light mb-3 mr-1 card-text-fixed-width" style='page-break-after:always'>
<div class="img-control">
#if (!string.IsNullOrWhiteSpace(item.ImageUrl))
{
<img src="#item.ImageUrl" style="height:150px;" class="card-img-top" alt="Card image" />
}
else
{
<img src="~/AdTrack Images/NoProductImage.png" style="height:150px;" class="card-img-top" alt="Card image" />
}
<div class="edit d-print-none">
<a data-toggle="modal"
data-id='{"id": "#item.Items.Number","ItemId":"#item.Items.ItemId", "AdId":"#item.Header.Id"}'
class="open-AddBookDialog btn btn-primary" href="#"><i class="fa fa-pencil fa-lg"></i></a>
</div>
<div class="delete d-print-none">
<a data-toggle="modal" data-id='{"id": "#item.Items.Number","ItemId":"#item.Items.Id", "AdId":"#item.Id"}'
class="open-delete btn btn-primary" href="#">
<i class="fa fa-trash" style="font-size:15px;color:red" id="delete" name="delete"></i>
</a>
</div>
<div class="edit d-print-none">
<a data-toggle="modal"
data-id='{"id": "#item.Items.Number","ItemId":"#item.Items.ItemId", "AdId":"#item.Header.Id"}'
class="open-AddBookDialog btn btn-primary" href="#"><i class="fa fa-info-circle fa-lg"></i></a>
</div>
}
</div>
<div class="card-header">
<div class="font-weight-bold">Page #Html.DisplayFor(modelItem => item.Number)- #Html.DisplayFor(modelItem => item.Business)</div>
<div class="row mb-2 font-weight-bold">
<div class="col-md-6">Cut: #Html.DisplayFor(modelItem => item.Items.Number)</div>
<div class="col-md-6 text-right">9-Box: #Html.DisplayFor(modelItem => item.Items.BoxNumber)</div>
</div>
<div class="row mb-2 font-weight-bold">
<div class="col-md-4">Group #Html.DisplayFor(modelItem => item.Department.Test)</div>
#*<div class="col-md-4">Div: #Html.DisplayFor(modelItem => item.Department.Division)</div>*#
<div class="col-md-4">Buyer #Html.DisplayFor(modelItem => item.Department.Test)</div>
<div class="col-md-4">Dept #Html.DisplayFor(modelItem => item.Items.Department)</div>
</div>
</div>
</div>
}
</div>

Answer 1

Add wrap div with style='page-break-after:always'.
<div class='row small'>
#foreach (var item in Model.BuyerList.ImageList)
{
<div style='page-break-after:always'>
<div class="card bg-light mb-3 mr-1 card-text-fixed-width" >
<div class="img-control">
#if (!string.IsNullOrWhiteSpace(item.ImageUrl))
{
<img src="#item.ImageUrl" style="height:150px;" class="card-img-top" alt="Card image" />
}
else
{
<img src="~/AdTrack Images/NoProductImage.png" style="height:150px;" class="card-img-top" alt="Card image" />
}
<div class="edit d-print-none">
<a data-toggle="modal"
data-id='{"id": "#item.Items.Number","ItemId":"#item.Items.ItemId", "AdId":"#item.Header.Id"}'
class="open-AddBookDialog btn btn-primary" href="#"><i class="fa fa-pencil fa-lg"></i></a>
</div>
<div class="delete d-print-none">
<a data-toggle="modal" data-id='{"id": "#item.Items.Number","ItemId":"#item.Items.Id", "AdId":"#item.Id"}'
class="open-delete btn btn-primary" href="#">
<i class="fa fa-trash" style="font-size:15px;color:red" id="delete" name="delete"></i>
</a>
</div>
<div class="edit d-print-none">
<a data-toggle="modal"
data-id='{"id": "#item.Items.Number","ItemId":"#item.Items.ItemId", "AdId":"#item.Header.Id"}'
class="open-AddBookDialog btn btn-primary" href="#"><i class="fa fa-info-circle fa-lg"></i></a>
</div>
}
</div>
<div class="card-header">
<div class="font-weight-bold">Page #Html.DisplayFor(modelItem => item.Number)- #Html.DisplayFor(modelItem => item.Business)</div>
<div class="row mb-2 font-weight-bold">
<div class="col-md-6">Cut: #Html.DisplayFor(modelItem => item.Items.Number)</div>
<div class="col-md-6 text-right">9-Box: #Html.DisplayFor(modelItem => item.Items.BoxNumber)</div>
</div>
<div class="row mb-2 font-weight-bold">
<div class="col-md-4">Group #Html.DisplayFor(modelItem => item.Department.Test)</div>
#*<div class="col-md-4">Div: #Html.DisplayFor(modelItem => item.Department.Division)</div>*#
<div class="col-md-4">Buyer #Html.DisplayFor(modelItem => item.Department.Test)</div>
<div class="col-md-4">Dept #Html.DisplayFor(modelItem => item.Items.Department)</div>
</div>
</div>
</div>
</div>
}
</div>

Answer 2

I had a similar problem, but I achieved it using CSS. Simply add a css class and give it width in percentage. For example, 30% if you want to display 3 pictures or 19% if you want to display 4 and you can also set margin accordingly if you want spaces between the images. In this way, the images would resize themselves accordingly no matter what screen size is.
Example:
img {
width: 30%;
float: left;
margin: 1.66%;
}
Please refer to this code pen link also: https://codepen.io/alinaalam/pen/YeLqWm