After addressing my previous issue with wicked_pdf, I am now facing a problem where the PDF generated is not displaying the Bootstrap styling of the application.
The technologies I'm using include bootstrap 4, ruby '2.4.2', and gem 'rails', '~> 5.2.1'
Here is a snippet from app/controllers/proposals_controller.rb:
def show
@proposal = Proposal.find(params[:id])
@custom_content = @proposal.custom_contents
respond_to do |format|
format.html
format.pdf do
render pdf: "some_name",
template: "proposals/show.pdf.erb",
layout: "pdf.html",
margin: { top: 35, bottom: 35 }
end
end
end
Below is part of app/views/layouts/pdf.html.erb:
<!DOCTYPE html>
<html>
<head>
<title>PDF</title>
<%= wicked_pdf_stylesheet_link_tag "application" -%>
</head>
<body>
<div class='container d-flex justify-content-center'>
test 2
<%= yield %>
</div>
</body>
</html>
app/views/proposals/show.pdf.erb
<div class="row full-page justify-content-center" id="cover">
<div class="container">
<div class="row p-0">
<div class="col-12 d-flex align-items-end ">
<%= wicked_pdf_image_tag '1209232_1920-1.jpg' %>
</div>
</div>
<div class="row pt-1 d-flex align-items-end text-justify">
<div class="col-12 text-justify cover-background">
<div class="row pt-1">
<h2 class="text-white text-justify">Proposal For <br> Maintenance</h2>
</div>
<div class="row p-0">
<div class="col-6">
<h5 class="text-white text-justify">Prepared For: <%= @proposal.contact.name %></h5>
<h6></h6>
</div>
<div class="col-6">
<h5 class="text-white text-justify">Prepared By: <%= @proposal.user.name %></h5>
</div>
</div>
</div>
</div>
</div>
</div>
In the stylesheet located at app/assets/stylesheets/application.scss, you can find:
// $navbar-default-bg: #312312;
// $light-orange: #ff8c00;
// $navbar-default-color: $light-orange;
$brand-color: #30AADD;
@import "font-awesome-sprockets";
@import "font-awesome";
@import "bootstrap";
@import "sticky-footer";
@import "announcements";
@import "summernote-bs4";
@import "summernote-custom-theme.min";
@import "material_icons";
// Proposal Cover
.full-page {
min-height: 100vh;
}
.cover-image{
background-image: url('https://heliportstudios.com/wp-content/uploads/2016/09/new-york-1209232_1920-1.jpg');
max-width: 100%;
max-height: 100vh;
}
.cover-background {
background: $brand-color;
}
plus alot of custom styling
I have searched extensively for solutions to this issue but none seem to be effective.