Why does bottom table cell that has centered-text get cut off when displayed as PDF in iOS?
I had many troubles with PDF rendering in order to keep the exact same aspect and size then my HTML file once transformed (mostly because of resolution translation problems).
The best and simpliest workaround that I found is to encapsulate the content in a container that exactly fit the height of the document.You can use the media query to apply your css code only on the print result if you want to display your source html file.
table, th, td { border-collapse: collapse; border: 3px solid black; text-align: center;}table.main-table { width: 1012px; height: 515px; background-color: #f4f4f4;}table.bottom-table { width: 1012px;}@media print { .main-container{ height:1100px;/* adjust the height to fit your PDF document*/ }}<div class="main-container"> <table class="main-table"> <tr><td>Hello World.</td></tr> </table> <table class="bottom-table"> <tr><td>This text gets cut off when centered. It does *not* get cut when left-aligned.</td></tr> </table> </div>
I understand that it has been sometime since the question has been posted. But I got myself intrigued with this, and was trying to figure out why this could be happening.
I also tried testing a variety of combinations to check this out. But it looks like no native iOS code could be of any help. But, assigning an auto height to the bottom-table seemed to do the job. Setting an explicit height did not work though.
table.bottom-table { width: 1012px; height: auto;}It looks like the PDF being rendered might have been having some issue in setting up the frame for the PDF, in the other case. I assume that you also know that the issue persisted in both Portrait and Landscape modes, when the height went above a certain limit.