PDF file not applying css styles

  • Resolved Dreagnout

    (@dreagnout)


    1 year, 12 months ago

    I can’t get it to apply the CSS styles on the PDF document. Readed the mpdf css and html support and changed all my hex code to rgb, all is ok from my point of view. HTML seems ok but it doesn’t apply css styles.

    The code that I insert on the PDF Message Body is (tried with <style> and inline css:

    <style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-3aam{background: rgba(235, 206, 206, 1);border-color:rgb(0, 0, 0);color:rgb(51, 51, 51);font-weight:bold;text-align:left;vertical-align:top}
.tg .tg-f5i8{background: rgb(146, 24, 58);border-color:rgb(0, 0, 0);color:rgb(255, 255, 255);font-size:16px;font-weight:bold;text-align:center;
  vertical-align:top}
.tg .tg-fxei{background: rgb(255, 255, 255);border-color:rgb(0, 0, 0);color:rgb(0, 0, 0);text-align:center;vertical-align:top}
</style>
<br />
<table class="tg" style="undefined;table-layout: fixed; width: 442px">
<colgroup>
<col style="width: 222px">
<col style="width: 385px">
</colgroup>
<thead>
  <tr>
    <th class="tg-f5i8" colspan="2"><strong>NUEVA BECA SOLICITADA</strong></th>
  </tr>
</thead>
<tbody>
  <tr>
    <td class="tg-3aam">Nombre y apellidos</td>
    <td style=".tg-fxei{background: rgb(255, 255, 255);border-color:rgb(0, 0, 0);color:rgb(0, 0, 0);text-align:center;vertical-align:top">[nombre-apellidos]</td>
  </tr>
  <tr>
    <td class="tg-3aam">DNI</td>
    <td style=".tg-fxei{background: rgb(255, 255, 255);border-color:rgb(0, 0, 0);color:rgb(0, 0, 0);text-align:center;vertical-align:top">[DNI]</td>
  </tr>
  <tr>
    <td class="tg-3aam">Edad</td>
    <td style=".tg-fxei{background: rgb(255, 255, 255);border-color:rgb(0, 0, 0);color:rgb(0, 0, 0);text-align:center;vertical-align:top">[edad]</td>
  </tr>
  <tr>
    <td class="tg-3aam">Teléfono</td>
    <td style=".tg-fxei{background: rgb(255, 255, 255);border-color:rgb(0, 0, 0);color:rgb(0, 0, 0);text-align:center;vertical-align:top">[telefono]</td>
  </tr>
  <tr>
    <td class="tg-3aam">Correo electrónico</td>
    <td style=".tg-fxei{background: rgb(255, 255, 255);border-color:rgb(0, 0, 0);color:rgb(0, 0, 0);text-align:center;vertical-align:top">[correo-electronico]</td>
  </tr>
  <tr>
    <td class="tg-3aam">Antiguo residente</td>
    <td style=".tg-fxei{background: rgb(255, 255, 255);border-color:rgb(0, 0, 0);color:rgb(0, 0, 0);text-align:center;vertical-align:top">[antiguo-residente]</td>
  </tr>
  <tr>
    <td class="tg-3aam">Titulacion académica</td>
    <td style=".tg-fxei{background: rgb(255, 255, 255);border-color:rgb(0, 0, 0);color:rgb(0, 0, 0);text-align:center;vertical-align:top">[titulacion-academica]</td>
  </tr>
  <tr>
    <td class="tg-3aam">Universidad de procedencia</td>
    <td style=".tg-fxei{background: rgb(255, 255, 255);border-color:rgb(0, 0, 0);color:rgb(0, 0, 0);text-align:center;vertical-align:top">[universidad-procedencia]</td>
  </tr>
  <tr>
    <td class="tg-3aam">A?o de finalización de estudios</td>
    <td style=".tg-fxei{background: rgb(255, 255, 255);border-color:rgb(0, 0, 0);color:rgb(0, 0, 0);text-align:center;vertical-align:top">[finalizacion-estudios]</td>
  </tr>
  <tr>
    <td class="tg-3aam">Beca solicitada</td>
    <td style=".tg-fxei{background: rgb(255, 255, 255);border-color:rgb(0, 0, 0);color:rgb(0, 0, 0);text-align:center;vertical-align:top">[beca-solicitada]</td>
  </tr>
</tbody>
</table>
<br />
<div style="margin-top: 15px;"><a href="https://docs.google.com/spreadsheets/d/1R8s8m3sh7Dx52vuFRAyD8w1wC981Q7_o4HBLI9eM8TA/edit#gid=371672101" title="Ver hoja Excel de inscripciones">Ver hoja excel de inscripciones</a></div>

    What can I do? Thanks.

    • This topic was modified 1 year, 12 months ago by Dreagnout.
    • This topic was modified 1 year, 12 months ago by Dreagnout.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author ZealousWeb

    (@zealopensource)

    Hey @dreagnout 

    Thanks for using our plugin.

Yes you can style your content as well as table. but you need to follow inline and table properties for style.
Note: you can not add class and do design because of here we are using PDF library.

Here one example which help you:

    <table style=”width:50%;border-collapse: collapse;” border=”1″ bgcolor=”#D6EEEE” cellpadding=”15″ >
    <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
    </tr>
    <tr bgcolor=”#ffffff”>
    <td><b>Jill</b></td>
    <td>Smith 50</td>
    <td>50</td>
    </tr>
    <tr >
    <td><i>Eve</i></td>
    <td>Jackson</td>
    <td>94</td>
    </tr>
    </table>`

    Thread Starter Dreagnout

    (@dreagnout)

    I cant get the second column and the thead to have vertical-align: middle, Check this img: https://ibb.co/hcG6JTL

    My code is:

    <style type="text/css">
.tg .tg-3aam{text-align: center;background: rgba(235, 206, 206, 1);border-color:rgb(0, 0, 0);color:rgb(51, 51, 51);font-weight:bold;text-align:left;vertical-align:middle}
.tg .tg-f5i8{background: rgb(146, 24, 58);border-color:rgb(0, 0, 0);color:rgb(255, 255, 255);font-size:16px;font-weight:bold;text-align:center;}
.tg background: rgb(255, 255, 255);border-color:rgb(0, 0, 0);color:rgb(0, 0, 0);text-align:center;vertical-align:middle;border-style:solid;}
</style>
<br />
<table class="tg" border="1" style="vertical-align: middle; text-align: center; width: 592px">
<colgroup>
<col style="width: 152px">
<col style="width: 485px;vertical-align: middle;">
</colgroup>
<thead  height="10" style="vertical-align:middle;line-height: 10px;">
  <tr style="line-height: 10px;">
    <th style="line-height: 10px;" height="20" colspan="2"><strong>NUEVA BECA SOLICITADA</strong></th>
  </tr>
</thead>
<tbody>
  <tr>
    <td class="tg-3aam">Nombre y apellidos</td>
    <td class="tg-3aam">[nombre-apellidos]</td>
  </tr>
  <tr>
    <td style="text-align: center;">DNI</td>
    <td style="text-align: center;margin: auto; vertical-align: middle;height: 50%">[DNI]</td>
  </tr>
  <tr>
    <td class="tg-3aam">Edad</td>
    <td class="tg-3aam">[edad]</td>
  </tr>
  <tr>
    <td class="tg-3aam">Teléfono</td>
    <td class="tg-3aam">[telefono]</td>
  </tr>
  <tr>
    <td class="tg-3aam">Correo electrónico</td>
    <td class="tg-3aam">[correo-electronico]</td>
  </tr>
  <tr>
    <td class="tg-3aam">Antiguo residente</td>
    <td class="tg-3aam">[antiguo-residente]</td>
  </tr>
  <tr>
    <td class="tg-3aam">Titulacion académica</td>
    <td class="tg-3aam">[titulacion-academica]</td>
  </tr>
  <tr>
    <td class="tg-3aam">Universidad de procedencia</td>
    <td class="tg-3aam">[universidad-procedencia]</td>
  </tr>
  <tr>
    <td class="tg-3aam">A?o de finalización de estudios</td>
    <td class="tg-3aam">[finalizacion-estudios]</td>
  </tr>
  <tr>
    <td class="tg-3aam">Beca solicitada</td>
    <td class="tg-3aam">[beca-solicitada]</td>
  </tr>
</tbody>
</table>
    Plugin Author ZealousWeb

    (@zealopensource)

    Hi @dreagnout

    Sure we are working on that, We are checking with MPDF library for generate PDF, they have attribute for Vertical align but not working. We are looking into this and update plugin.

    Until that you can user padding top property to make center it.

    <th style="padding-top: 50px;"><strong>NUEVA BECA SOLICITADA</strong></th>

    Thanks & Regards

    Thread Starter Dreagnout

    (@dreagnout)

    Hi, still without updating it to solve this issue?

    Plugin Author ZealousWeb

    (@zealopensource)

    Hi @dreagnout

    As in our last comment we have share solution and its works fine.

    Check Video link – https://watch.screencastify.com/v/NGHD6oRR11Tvcu79zQYc

    Thanks,

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘PDF file not applying css styles’ is closed to new replies.