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> 1 Answers
Answers 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> 
0 comments:
Post a Comment