Text-Align in table with MPDF

Asked

Viewed 49 times

0

Good evening, everyone.

I am using summernote to create/manage texts, and Gero pdf using the MPDF library. However the alignments, (left, center and right), when used from the cells of a table, are not passed pro MPDF, while in HTML, or even on the print screen works perfectly.

A simple example of a table

<tbody>
  <tr>
    <td><p><span >CPF/CNPJ</span></p>
       <p style="text-align: center; "><span style="font-size: 12px;">123.123.123-12</span></p>
    </td>
    <td>
       <p><span style="font-size: 14px;">RG/Insc.Estadual</span></p>
       <p style="text-align: center; "><span style="font-size: 12px;">123456789</span></p>
    </td>
   </tr>
</tbody>

In this case, in HTML ta cool, in PDF it is all aligned to the left.

I found on the MPDF site that is a limitation, where block tags (div, p, etc) are not accepted.

Tables
Block elements (e.g. DIV or P) are not supported inside tables. The content is displayed, but any CSS properties which apply to block elements are ignored (e.g. borders, padding, margins etc).

I tried to replace the tags, by span, with jquery but these also do not accept alignment.

tdtag = document.querySelectorAll("td");
tdtag.forEach( e => {
   if(e.style.textAlign == "right"){                
     $(e).html("<span style='text-align:right'>"+$(e).html()+"</span>");
   }
});

Someone’s been through this and there’s a solution to it?

php javascript jquery mpdf summernote

  • span is an element inline, so it has no larger width than its content, and with that alignment it has no effect. I do not know will work but try to change the properties of span with <span style='text-align:right; display: inline-block; width: 100%;'>

  • Thanks for the tip. But even though it didn’t work, I imagine the MPDF always ignore an element that turns block on inline-block within a table. I am trying to force the alignment by <td> to see if it works

2 answers

0

I managed to solve by inserting the text-align directly into the td, not the most beautiful thing, but it works.

Here I get the tag 

var ptag = document.querySelectorAll("p");

Here I make a forEach, and each element containing the center I apply in the <td> nearest.

ptag.forEach(e => {
  if(e.style.textAlign == "center") {
    if(e.closest("td")) {
      e.closest("td").style.textAlign = "center";
    }                
  };
});

0

You can try straight to td, so all of its components will align to the center. would be:<td style="text-align: center;">

  • 1

    That’s what I had to do, but as the tables are being generated automatically, I had to take the elements via javascript when saving and adding the rule in td with closest.

Browser other questions tagged php javascript jquery mpdf summernote

You are not signed in. Login or sign up in order to post.