Unwanted gap at bottom of table elements

If you're generating a PDF that contains Bubble's native table element, you may sometimes encounter an unwanted gap at the bottom of the table in the PDF.

Why is this happening?

The gap gets added when the table you are adding to the PDF has a width larger than the width of the PDF itself. For example, in the above image we generated a 'letter' PDF that had a width of 816px.

The table in the above example had a max width of 900px.

This is larger than the width of the 'letter' PDF we're generating (816px) so the table will have a width of 716px on the PDF.

816px - (2 * 50px for the left / right padding) = 716px.

This will cause an unwanted gap to be added to the bottom of the table element.

Solution

To avoid the unwanted gap, set a max width on the table that is less than the width of the PDF you are generating (including padding / margins).

EG if you are generating a 'letter' PDF (which will have a width of 816px) and your group has combined padding of 100px, the max width you should set on the table is 716px.

If you're unable to reduce the max width of your table element, you can also use the following (more complex) solution:

• Add a yes/no custom state to your page called 'pdf generating' and set the default value to no

• Before you run the 'Generate PDF Creator' action, change the custom state to 'yes'

• Put a conditional statement on your table element so that its max width gets changed (to an appropriate value) when 'pdf generating' is 'yes'

• Once the PDF is generated, change the custom state back to 'no' (you can use the 'When PDF Creator is downloaded' event)

You may wish to use a loading screen to hide this change in the max width of the table. You can do this by adding a floating group.

Demo app

You can view this page of our demo app for an example of what causes the unwanted gap and how to solve it.