0

How to set page break in dynamic content rotativa ?

I have a list of lists which loads data dynamically through a model binding

@foreach (var item in Model.Items)
{
    <div class="separator-bottom col-xs-12 avoid-page-break">
        <div>
            (generates the list)
        </div>
    </div>
}

And my avoid-page-break class is like this

 .avoid-page-break {
        page-break-inside: avoid !important;
        margin: 4px 0 4px 0
  }

I followed, this answer. I've used the styling as mentioned in it. It solves the issue in 1st page, but still having the issue from 2nd page onwards.

Is there any workaround to solve this ? Any help would be appreciated. Thanks

Thidasa Pankaja
  • 930
  • 8
  • 25
  • 44
  • 1
    Is this not more of a CSS problem than C# or .NET? PS I'm afraid I don't know the answer lol – David C Mar 28 '19 at 09:02
  • @DavidC799 This works in normal HTML (View) So this seems like more of a rotativa extension problem. Researched a bit about it. Many have faced this issue in different scenarios when they're using rotativa extension to export the pdf. – Thidasa Pankaja Mar 28 '19 at 10:19
  • Ah apologies then, I've never heard of that extension before. – David C Mar 28 '19 at 10:46

1 Answers1

-1

this is a problem with how Rotativa renders the page. Do like this:

<div style="page-break-inside: avoid !important">
   <div style="break-inside: avoid-page !important;">
     sub-content 01
   </div>
   <div style="break-inside: avoid-page !important;">
     sub-content 02
   </div>

what will happen is that between sub-content 01 and 02 there will be a page break if necessary.

NOTE: If the sub-content 01 is large enough to break only one page, nothing will happen to it.

Dorathoto
  • 201
  • 7
  • 17