Cell margin overwrites the footer

[kingoffighter97]

In my table, each row is a stack and its margin is set to [15,10,15,10]. When the bottom border of a row touches the bottom boundary of the page, the top margin of the next row is rendered inside the footer, which makes that row's content rendered in the next page without the top margin. Looks something like this:

I've tried enabling dontBreakRow, but the type of data I'm using is unorthodox, as data in 1 row could be longer than 1 page, which breaks the row and not rendering it at all.

Any solution for this?

[liborm85]

Please add simple example of docDefinition for reproduce this problem.

[kingoffighter97]

The doc I made looks something like this:

var dd = {
    header: function(){
      return {
          table: {
              body: [
                  [
                      {image: 'bot_head'},
                  ]
              ]
          }, margin: [72,40]
      };
    },
    footer: [{
        table: {
          widths: [500],
          headerRows: 1,
          body: [[{ text: "", border: [false, true, false, false] }]]
        },
        layout: {
          hLineWidth: function(i, node) {
            return 1;
          }
        },
        margin: [40, 15, 0, 0]
      },
      {
        text: "© Copyright 2017, Public Services Health and Safety Association. All rights reserved. Reproduction in whole or in part by any means without express written consent of Public Services Health and Safety Association is prohibited by law.",
        margin: [40, 0, 40, 0],
        style: "smallText"
      },
      {
        text: "",
        margin: [0, 5, 40, 0],
        alignment: "right",
        style: "smallText",
        bold: true
      }]
    ,
    pageMargins: [72,150,72,150],
    pageSize: 'LETTER',
    content: [
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        	{text: 'A simple table (no headers, no width specified, no spans, no styling)', style: 'subheader'},
		'The following table has nothing more than a body array',
		{
			style: 'tableExample',
			table: {
				body: [
					[{text:'Column 1\nwhatwhat', margin: [0,20,0,20]}, {text:'One value goes here', margin: [0,20,0,20]}, {text:'One value goes here', margin: [0,20,0,20]}],
					[{text:'One value goes here', margin: [0,20,0,20]}, {text:'One value goes here', margin: [0,20,0,20]}, {text:'One value goes here', margin: [0,20,0,20]}]
				]
			},
			margin: [0,20,0,20]
		},
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        {
      text: `Completed By (Name/Designation): ${"_".repeat(40)}`,
      style: "subTitle",
      margin: [0, 20, 47, 0],
      alignment: "right"
    },{
      text: `Completed By (Name/Designation): ${"_".repeat(40)}`,
      style: "subTitle",
      margin: [0, 20, 47, 0],
      alignment: "right"
    },{
      text: `Completed By (Name/Designation): ${"_".repeat(40)}`,
      style: "subTitle",
      margin: [0, 20, 47, 0],
      alignment: "right"
    }
        ],
    images:{
        bot_head: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEMAAABMCAYAAAA2nAqmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABJBJREFUeNrsm89u0zAYwJ1pt1Vqb+utkca9eYNmAmnc1jdYDwiOK/AA7Z5gRQIkEFKDBBIHppUbk0DLnmDpnWnlxk7rpO487PJNeJ7t2GmcP00+yUrXpf2cnz9//5JaKAX58dNv4kMXDxvemuIxePTQPUEpipUCiB188AT/7mAgHwsBA4No4MMk5DQbA/mdBoyVhPV1mL99GLR007KM1YT1udTrAFvAJljMKT448L5TFBhTejtgCFV4XUMZkKS3Cb0lagBnQkUVIqOiwPA4DrTGWI5XCBjYR1zhQ1sQUch7LpxTjDwDHGaLE0XctJOuFVRKCaOEUcIoYZQwShhZzzOgZ+EyaTabdbIFWcDULrykbIRzkW+5gAEdrJEEQlz1TdtEproSI4gqTNQ2bM0uJ3vNnM8YJFiKOxh+L8swOgn7u04mYUDhlbTEvh2tBfxDm4oYbooR0YdI40O0uUoEBnS3+ylsCVWZgu8aRIFiaVjCIMMQeFA6ujmJpQBiG/1rxdVQ/oTMu6tqJVYIiB5sizwLyWyV2omWBMRQc1v4YJ5BAlFE12krAVldEIRnul5Q2MJthbk6UCZsalkGVrALzjLMCjpp3RMVRDlPwVpIlHmuBAMKrTAzT/VOeQgUlYUUduHZDHQUEq6crIIgguf2SmHLeKHpOEQOO4ToOOuhAxZLBsSGfgsfBiRVskcBunkAwQCRpQR9mWV0JEmVD+aXK8Fz3pP4P6513MLoZqg0j1Nk19W+BwMiiMhXeFkJnxGt40RiHW2eZbhRPG+OZKDah5HBmKZ9VzwmkaULLgvDlmSZuReoRwJJnXMHhiMpbpZFJqowdL8gr2V8qKxKkhN/iWD4guu8t+A3gtFaIhg9wTUeq26TwkkJo4QhdqBalZ2i5yaZq2qVe9u6syPqIs4xlrajBY7ElAcnRZ6otmkBNDsGXQHoohdgn8qhbIGeCVty3Bgcl3g0OZPYMaRrm9JxGOE7jMIg4xyPKjXJpmH4jZBwKhxJOFCb6SsMDOqqLVpp3yQwLhOwCno0oliG9Mc3a2sVtLX1GFUqFSWq43EwH4IVa8l6J+vr9bkuVTk6+o4uLv7IulgTqqQQOdA7dwCl0eTT5y+oXq9rmdnLF10RkC76/0zHPRDv3n9Qhk5kNpuhZ0+fiICQtGCPScf7goi3GZp0EavQBUFkY+OBbD9zhejRAUGEnK/7GZUMlLuM19cz9PbN6/kK6JguGZK8YyLaXpLPca3i4OArOjv7tej1O0ykQ8OEnBpRupuQLrbi3g0J/T0Y8w+antwhTKqRUF7DiqreuRwbnmCTSZNN6toWbIljVRhVyAVMTI69c0V0nRrSNZT4h4bCNd45Oc5JXnJA0EDitsZ9BYfZDAHCbZGdLwhhSNUIMtmJYQEONVuUDdFCWCEf0i2vp2wfA56qob9nyrmjH0XXbeke9SHYJpT9Dp2BGhMAEXASrj7cJS9U288RZJ5uEXugrub7hYSR1i8R0oEBj0Y5UUAto2W4C/5/qWA4JQyNi82a30gVRtaswwgMjRV3i2AZAVJ7QMTLEoy/AgwAS/Y0W/Yhy/IAAAAASUVORK5CYII="
    }
};

[JInfantesC]

I have encountered this problem recently and found the following thread #241 where @jthoenes explains that the footer exists outside the margins.
In my case I extended the margins of the page and the tables stopped being drawn on the footers and using your doc I set the margins pageMargins: [72,150,72,90], and worked.

Hope you find it helpful

[kingoffighter97]

@JInfantesC Thank you! But I'm not sure this will help. No matter how thick/thin your bottom margin is, there will always be an awkward spot where the table looks like it's overlapping the footer. Using pageMargins: [72,150,72,90], I can simply add another row into my table to reproduce the issue:

var dd = {
    header: function(){
      return {
          table: {
              body: [
                  [
                      {image: 'bot_head'},
                  ]
              ]
          }, margin: [72,40]
      };
    },
    footer: [{
        table: {
          widths: [500],
          headerRows: 1,
          body: [[{ text: "", border: [false, true, false, false] }]]
        },
        layout: {
          hLineWidth: function(i, node) {
            return 1;
          }
        },
        margin: [40, 15, 0, 0]
      },
      {
        text: "© Copyright 2017, Public Services Health and Safety Association. All rights reserved. Reproduction in whole or in part by any means without express written consent of Public Services Health and Safety Association is prohibited by law.",
        margin: [40, 0, 40, 0],
        style: "smallText"
      },
      {
        text: "",
        margin: [0, 5, 40, 0],
        alignment: "right",
        style: "smallText",
        bold: true
      }]
    ,
    pageMargins: [72,150,72,90],
    pageSize: 'LETTER',
    content: [
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        	{text: 'A simple table (no headers, no width specified, no spans, no styling)', style: 'subheader'},
		'The following table has nothing more than a body array',
		{
			style: 'tableExample',
			table: {
				body: [
					[{text:'Column 1\nwhatwhat', margin: [0,20,0,20]}, {text:'One value goes here', margin: [0,20,0,20]}, {text:'One value goes here', margin: [0,20,0,20]}],
					[{text:'One value goes here', margin: [0,20,0,20]}, {text:'One value goes here', margin: [0,20,0,20]}, {text:'One value goes here', margin: [0,20,0,20]}],
					[{text:'One value goes here', margin: [0,20,0,20]}, {text:'One value goes here', margin: [0,20,0,20]}, {text:'One value goes here', margin: [0,20,0,20]}]
				]
			},
			margin: [0,20,0,20]
		},
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        {
      text: `Completed By (Name/Designation): ${"_".repeat(40)}`,
      style: "subTitle",
      margin: [0, 20, 47, 0],
      alignment: "right"
    },{
      text: `Completed By (Name/Designation): ${"_".repeat(40)}`,
      style: "subTitle",
      margin: [0, 20, 47, 0],
      alignment: "right"
    },{
      text: `Completed By (Name/Designation): ${"_".repeat(40)}`,
      style: "subTitle",
      margin: [0, 20, 47, 0],
      alignment: "right"
    }
        ],
    images:{
        bot_head: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEMAAABMCAYAAAA2nAqmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABJBJREFUeNrsm89u0zAYwJ1pt1Vqb+utkca9eYNmAmnc1jdYDwiOK/AA7Z5gRQIkEFKDBBIHppUbk0DLnmDpnWnlxk7rpO487PJNeJ7t2GmcP00+yUrXpf2cnz9//5JaKAX58dNv4kMXDxvemuIxePTQPUEpipUCiB188AT/7mAgHwsBA4No4MMk5DQbA/mdBoyVhPV1mL99GLR007KM1YT1udTrAFvAJljMKT448L5TFBhTejtgCFV4XUMZkKS3Cb0lagBnQkUVIqOiwPA4DrTGWI5XCBjYR1zhQ1sQUch7LpxTjDwDHGaLE0XctJOuFVRKCaOEUcIoYZQwShhZzzOgZ+EyaTabdbIFWcDULrykbIRzkW+5gAEdrJEEQlz1TdtEproSI4gqTNQ2bM0uJ3vNnM8YJFiKOxh+L8swOgn7u04mYUDhlbTEvh2tBfxDm4oYbooR0YdI40O0uUoEBnS3+ylsCVWZgu8aRIFiaVjCIMMQeFA6ujmJpQBiG/1rxdVQ/oTMu6tqJVYIiB5sizwLyWyV2omWBMRQc1v4YJ5BAlFE12krAVldEIRnul5Q2MJthbk6UCZsalkGVrALzjLMCjpp3RMVRDlPwVpIlHmuBAMKrTAzT/VOeQgUlYUUduHZDHQUEq6crIIgguf2SmHLeKHpOEQOO4ToOOuhAxZLBsSGfgsfBiRVskcBunkAwQCRpQR9mWV0JEmVD+aXK8Fz3pP4P6513MLoZqg0j1Nk19W+BwMiiMhXeFkJnxGt40RiHW2eZbhRPG+OZKDah5HBmKZ9VzwmkaULLgvDlmSZuReoRwJJnXMHhiMpbpZFJqowdL8gr2V8qKxKkhN/iWD4guu8t+A3gtFaIhg9wTUeq26TwkkJo4QhdqBalZ2i5yaZq2qVe9u6syPqIs4xlrajBY7ElAcnRZ6otmkBNDsGXQHoohdgn8qhbIGeCVty3Bgcl3g0OZPYMaRrm9JxGOE7jMIg4xyPKjXJpmH4jZBwKhxJOFCb6SsMDOqqLVpp3yQwLhOwCno0oliG9Mc3a2sVtLX1GFUqFSWq43EwH4IVa8l6J+vr9bkuVTk6+o4uLv7IulgTqqQQOdA7dwCl0eTT5y+oXq9rmdnLF10RkC76/0zHPRDv3n9Qhk5kNpuhZ0+fiICQtGCPScf7goi3GZp0EavQBUFkY+OBbD9zhejRAUGEnK/7GZUMlLuM19cz9PbN6/kK6JguGZK8YyLaXpLPca3i4OArOjv7tej1O0ykQ8OEnBpRupuQLrbi3g0J/T0Y8w+antwhTKqRUF7DiqreuRwbnmCTSZNN6toWbIljVRhVyAVMTI69c0V0nRrSNZT4h4bCNd45Oc5JXnJA0EDitsZ9BYfZDAHCbZGdLwhhSNUIMtmJYQEONVuUDdFCWCEf0i2vp2wfA56qob9nyrmjH0XXbeke9SHYJpT9Dp2BGhMAEXASrj7cJS9U288RZJ5uEXugrub7hYSR1i8R0oEBj0Y5UUAto2W4C/5/qWA4JQyNi82a30gVRtaswwgMjRV3i2AZAVJ7QMTLEoy/AgwAS/Y0W/Yhy/IAAAAASUVORK5CYII="
    }
};

Your fix would work if I had a fixed amount of data. However, I am working mostly with a dynamic set of data, so I never know exactly at what point the table will stop in a page.

[JInfantesC]

I see, i've tried now padding and looks like it is respected more than margin.
following the thread #345 we can use:

layout:{
	paddingLeft: function(i, node) { return 2; },
	paddingTop: function(i, node) { return 20; },
	paddingRight: function(i, node) { return 2; },
	paddingBottom: function(i, node) { return 20; }
}

on the table like this:

{
style: 'tableExample',
table: {
	body: [
		[{text:'Column 1\nwhatwhat'}, {text:'One value goes here'}, {text:'One value goes here'}],
		[{text:'One value goes here'}, {text:'One value goes here'}, {text:'One value goes here'}],
		[{text:'One value goes here'}, {text:'One value goes here'}, {text:'One value goes here'}],
	]
},
margin: [0,20,0,20],
layout:{
	paddingLeft: function(i, node) { return 2; },
	paddingTop: function(i, node) { return 20; },
	paddingRight: function(i, node) { return 2; },
	paddingBottom: function(i, node) { return 20; }
	}
},

I deleted every cell margin because padding will do the work.

On the playground it worked...
I don't know if pdfmake should respect margin like it does with padding, if it should, this keeps the bug tag.

P.S. I fixed the left and right to 2 for aesthetic reasons.
Tell me if it worked