Page break in DataList (asp.net) in Google Chrome

Question

I have created a Page with the Datalist control in it, which generates "ID cards".
You can see the working example here.

The problem is that I want to break the page after every 4th row of Datalist.

So to execute this, I am using this jQuery code:

<script type="text/javascript">
        $(document).ready(function () {
            $("#GridView1 tr:nth-child(4n+0)").addClass("breakpage");

        })
    </script>

And the CSS class:

<style type="text/css">
                .breakpage {
                page-break-after: always;
        }
    </style>

So if you open the page and check with the inspect element, you can see that the jQuery is working, and it does add the class on every 4th row.
But still, when I try to take a print, the page break is not working in Google Chrome (working fine in firefox).

Could someone please explain what is wrong with the code?

Thank you.

Your website link does not seem to do anything, the page remains empty — Thomas Mulder, Apr 14 '20 at 07:00
I am sorry, I have corrected the link, please try now. Thank you — ygssoni, Apr 15 '20 at 07:32
Can't you use margin or padding? Is there any specific reason to do so? — vrintle, Apr 15 '20 at 14:22
@ygssoni your jquery for adding the breakpage class is not working entirely I think, it's also putting it on every 4th tr _inside_ your cards (this line: "कर्मचारी आईडीः 123456789" for example) — Thomas Mulder, Apr 16 '20 at 08:07

score 1 · Answer 1 · answered Apr 15 '20 at 11:03

1

Try it in CSS with this:

#GridView1 tr:nth-of-type(4n) {
  page-break-after:always;
}

answered Apr 15 '20 at 11:03

Jack

313
5
22

thank you. but this too is working fine on firefox, but not in Chrome. I am searching a solution for google chrome. – ygssoni Apr 15 '20 at 12:24
Did you remove the jQuery? – Jack Apr 15 '20 at 14:10
this solutions may help [Google Chrome Printing Page Breaks](https://stackoverflow.com/questions/1630819/google-chrome-printing-page-breaks) – Vignesh A Apr 15 '20 at 17:57

Thomas Mulder · Accepted Answer · 2020-04-16T13:26:48.953

How to achieve page break in HTML table for Google Chrome? can you see if this page helps? It might have something to do with a tr being display: table-row instead of display: block Apparently Chrome only applies the page break to block level elements.

Edit: I've just tested that setting the following fixes it:

#GridView1 > tbody > tr {
    display: block;
}

If I shrunk the margins of the pages the pagebreak didn't fall on the next page, but playing around with the sizes of your cards would fix this too so you don't have a fully empty page

Page break in DataList (asp.net) in Google Chrome

2 Answers2