0

We have this page that the client uses for printing out some data onto paper. It loops through a list of MVC models, and every new iteration should be printed on a new page.

In cshtml I have built this (simplified):

@foreach (var header in Model.ReportHeaders)
{
    <div style="page-break-after:always">
        <div>
            <img src="Logo-image-url" />
            <h2>Misc Logo stuff</h2>
        </div>

        <div>Report header information</div>

        <div>
            <table>
                <thead>
                    <th>Column headers</th>
                    <th>Column headers</th>
                    <th>Column headers</th>
                </thead>
                <tbody>
                    @foreach (var details in header.ReportDetails)
                    {
                        <td>All the data here</td>
                        <td>All the data here</td>
                        <td>All the data here</td>
                    }
                </tbody>
            </table>
        </div>
    </div>
}

But somehow, however I try to rearrange the page-break-after styling neither Chrome or IE wants to start on a new page when printing it. Am I using it incorrectly, or why doesn't it work as intended?

Hofftari
  • 106
  • 8
  • What do you mean by new page ? Is it new Div or Container or a separate page ? – Basanta Matia Jul 06 '17 at 07:38
  • Where do you put your div? is it inside one of these: inside tables, floating elements, inline-block elements, and block elements with borders? See the reference in this question's answers https://stackoverflow.com/q/4884380/6638533 – samAlvin Jul 06 '17 at 07:43
  • I want an entire new physical page when printing this through the browser. This page is actually called inside another div in the index page through a ajax post, but that div isn't inside any other element, but instead straight at the end of that Index.cshtml file. Though I'll have to check and see if there is a float styling to any of the class attributes we use. – Hofftari Jul 06 '17 at 07:51

1 Answers1

0

This whole page was indeed, as samAlvin commented on my question, inheriting a layout page where both a div with class "page" and another div with the ID "main" had the styling float:left. I temporarily removed the float styling on these two divs just before the print function and then re-added it afterwards. The page has a small hickup during that millisecond, but at least the print now works correctly in all browsers. Thanks for the quick help!

Hofftari
  • 106
  • 8