Pdf Content Not Displaying

Contents hide

Problem Description:

I am trying to debug an issue where some HTML content is not rendering in the pdf. Earlier it used to work fine but now I don’t empty spaces. Initially, I suspected there was some backend or rails issue but that was the wrong assumption. Then I thought it was a bootstrap issue but I was wrong because when I use the same HTML and render in the browser it works perfectly fine.

Below HTML is not showing in the PDF file. I can only see the Horizontal line which gets render due to <hr/> tag

<div class="row top-padded">
          <div class="col-md-10">
            <p class="block bold"><%= (status == "abstain") ? "Abstained By" : "#{status.capitalize} By:" %></p>
            <hr />
            <% requesters.merge(User.answered).where(approved_status: status).each do |user_obj| %>
              <% user = user_obj&.user&.decorate %>
              <%= image_tag user_obj.signature, style: "width: 200px; height: auto;" unless user_obj.signature.blank? %>
              <p>
                <%= user&.first_last || "Removed User" %>
                on
                <%= user_obj.decorate.response_date %>
                <%= user&.time_zone if user %>
              </p>
            <% end %>
          </div>
        </div>

So my final suspect is two things

I am using wkhtmltopdf to convert HTML to pdf. So, I suspect that this is creating an issue
Few months back we updated from bootstrap 4 to bootstrap 5 so maybe the CSS is not compatible with pdf.

I would need some suggestions or help on how can I resolve this issue

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta charset="UTF-8">
    <%= wicked_pdf_stylesheet_link_tag "optional/pdf_fonts" %>
    <%= wicked_pdf_stylesheet_link_tag "application" %>
  </head>
  <body>
    <div class="col-lg-12">
      <h1><%= question %></h1>
      <div class="approval_metadata top-padded">
        <p>
          <%#=  this is for rendering pdf%>
          <%= content_tag(:span, highlight("Title: #{user&.name}", 'title', highlighter: '<strong>1</strong>'), class: "block") %>
          <%= content_tag(:span, highlight("Filename: #{user&.filename}", 'filename', highlighter: '<strong>1</strong>'), class: "block") %>
          <%= content_tag(:span, highlight("File created: #{user&.created_at&.strftime('%d-%^b-%Y %I:%M:%S %p')}", 'file created', highlighter: '<strong>1</strong>'), class: "block") %>
          <%= content_tag(:span, highlight("File Last Modified: #{user&.updated_at&.strftime('%d-%^b-%Y %I:%M:%S %p')}", 'file last modified', highlighter: '<strong>1</strong>'), class: "block") %>
          <%= content_tag(:span, highlight("Location: Resource Library / #{user.pluck(:name)&.join(" / ")}", 'location', highlighter: '<strong>1</strong>'), class: "block") %>
          <%= content_tag(:span, highlight("Approval Requested: #{approval&.created_at&.strftime('%d-%^b-%Y %I:%M:%S %p')}", 'approval requested', highlighter: '<strong>1</strong>'), class: "block") %>
          <%= content_tag(:br) %>
        </p>
      </div>
      <% User.statuses.each do |status, index| %>
        <div class="row top-padded">
          <div class="col-md-10">
            <p class="block bold"><%= (status == "abstain") ? "Abstained By" : "#{status.capitalize} By:" %></p>
            <hr />
            <% requesters.merge(User.answered).where(approved_status: status).each do |user_obj| %>
              <% user = user_obj&.user&.decorate %>
              <%= image_tag user_obj.signature, style: "width: 200px; height: auto;" unless user_obj.signature.blank? %>
              <p>
                <%= user&.first_last || "Removed User" %>
                on
                <%= user_obj.decorate.response_date %>
                <%= user&.time_zone if user %>
              </p>
            <% end %>
          </div>
        </div>
      <% end %>
    </div>
  </body>
</html>

Solution – 1

The issue has been resolved by changing col-md to col-lg. Reference Bootstrap v5 Grid is not working in "col-lg" case

Rate this post