0

I am currently encountering an issue with the formatting of a table in a PDF document, generated using Wicked PDF in a Rails application, and am seeking assistance in resolving this issue.

The requirement is to make the table fill the remaining space of the document. However, while the table displays as expected on the web page, it does not expand to fill the entire page within the PDF document.

Below are the CSS classes used to style the table:

table {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
}
table thead,
table tbody,
table th,
table td,
table tr {
  border: 2px solid #a6a6a6;
  font-style: italic;
}
table th {
  font-family: 'myriad-pro', arial;
  font-weight: 500 !important;
  font-size: 16px;
  text-align: center;
}
table td {
  font-size: 14px;
  font-style: italic;
}
.h-100 {
  height: 100%;
  min-height: 100%;
}
.justify-content-center {
    -webkit-box-pack: center;
 }
.w-100 {
  width: 100%;
}
.flex-1 {
  -webkit-flex: 1; /* Chrome */
  -ms-flex: 1; /* IE 10 */
  flex: 1;
}
.d-flex {
  display: -webkit-box;
}

And here is the Haml markup for the div used in the PDF:

.d-flex.h-100.w-100
  .d-flex.justify-content-center.w-100
    %table.flex-1{border: 1}
      %thead
        %tr
          %th Col1
          %th Col2
          %th Col3         
      %tbody
        %tr
        - @cols.each do |col|
          %tr
            %td= col.val1
            %td= col.val2
            %td= col.val3

Does know anyone how to solve this issue?

Serban Marin-Eusebiu
  • 31
  • 4
  • 2
    I think WickedPDF is based on WKHTMLTOPDF which last time I used it didn't accept newer CSS like flex or grid. Try to style your page without any flex element... Otherwise switch to Grover / Puppeteer which accepts flex and grid – Maxence Jun 08 '23 at 14:24
  • Wicked PDF used indeed WKHTMLTOPDF, But it can use flex using the the basic webkit approach, because it is evolved from webkit as well. I make that affirmation because the flex styles work perfectly fine with all the other components, just the table is messing around. – Serban Marin-Eusebiu Jun 08 '23 at 16:58
  • 1
    Didn't know that actually. I am neither much familiar with `display: --weblkit-box;` What I would try is adding `height: auto;` or `height: 100%;` but this seems a bit naïve. Maybe add CSS3 and WKHTMLTOPDF tags to your question so someone who is really proficient may help you. – Maxence Jun 08 '23 at 21:24

0 Answers0