Following my previous wicked_pdf question, now that I am rendering the correct template I cannot get the pdf to render the bootstrap styling of the application.
I am using bootstrap 4, ruby '2.4.2' and gem 'rails', '~> 5.2.1'
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
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>
app/assets/stylesheets/application.scss
// $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 looked through alot of cases of this but nothing seems to work
In your head of the pdf.html.erb, you need to reference the bootstrap css file.
<head>
<title>PDF</title>
<%= wicked_pdf_stylesheet_link_tag "application" -%>
<%= wicked_pdf_stylesheet_link_tag "bootstrap" %>
</head>
Add the bootstrap.css file to your assets/stylesheets.
Related
This is my code. I am using express.js. this is ejs file. the snapshot of code below is this
<%- include ("../partials/header") %>
<div class="container">
<header class="jumbotron">
<div class="container">
<h1>Welcome To YelpCamp!</h1>
<p>View our hand-picked campgrounds from all over the world</p>
<p>
<a class="btn btn-lg btn-primary" href="/campgrounds/new">Add new Campground </a>
</p>
</div>
</header>
<div class="row" style="display:flex; flex-wrap:wrap;">
<% campgrounds.forEach(function(campground){ %>
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img src="<%= campground.image %>">
<div class="caption">
<h4> <%= campground.name %> </h4>
</div>
<p>
More Info
</p>
</div>
</div>
<% }); %>
</div>
</div>
<%- include ("../partials/footer") %>
I want to adjust thumbnails to occupy empty spaces in between as it is looking hideous. is there any way to do that using bootstrap 3
( I have also marked in image please refer the image)
Any help is appreciated..
What is the height of that largest thumbnail in the row?
Set the thumbnail class to be that height always
.thumbnail{
width:250px;
height:600px !important;
}
I'm working on a page (Angular) that dynamically displays bootstrap cards that looks as follows:
<div class="row">
<div class="card border-primary p-0 mb-2 col-md-4 col-sm-6 colxs-12" *ngFor="let m of myVals">
<h4 class="card-header text-center">{{m.Title}}</h4>
<div class="card-body">
<h5>{{m.Year}}</h5>
<img [src]="m.Poster" [alt]="m.Title" class="card-img-top">
</div>
</div>
</div>
The issue I'm facing is with the element <h4 class="card-header text-center">{{m.Title}}</h4>
The challenge is that sometimes the title gets displayed on 2 lines, other times on 1 (but never more than 2) and, so, the cards aren't looking uniform.
What I'm wondering is if there's a Bootstrap / CSS way to always make the card-header display as 2 lines high regardless of the text within it. I've tried setting a CSS style of line-height: 2, but it's not affecting it at all. Any correct / better way to accomplish this?
Thanks!
You can add the custom CSS to do it. check working fiddle below -
.card-header-custom {
min-height:80px;
display:flex;
justify-content:center;
align-items:center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Card Header and Footer</h2>
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-header card-header-custom">Header big content Header big content </div>
<div class="card-body">Content</div>
<div class="card-footer">Footer</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-header card-header-custom">Header</div>
<div class="card-body">Content</div>
<div class="card-footer">Footer</div>
</div>
</div>
</div>
</div>
</body>
</html>
HTML:
<div>
<h4>
<span>One line heading</span>
</h4>
<h4>
<span>Assume this heading has two lines</span>
</h4>
</div>
CSS:
h4 {
height: 2.5em;
}
h4 span {
line-height: 1.25em;
}
Using bootstrap's grid, is it possible to build something responsive like this?
This is what I attempted at so far.
<div class="row">
<div class="panel panel-default profile_header">
<div class="panel-body">
<% for user in #users %>
<div class="col-xs-5 col-md-3">
<%= image_tag(user.avatar.url(:medium), :class => "avatar_profile") %>
</div>
<div class="col-xs-7 col-md-9">
<h2 class="profile_name"><%= user.name %></h2>
<div class="row">
<div class="col-xs-12 col-md-12">
<h2 class="profile_bio"><%= user.bio%></h2>
</div>
</div>
</div>
<% end %>
</div>
</div>
</div>
But for mobile, I want the purple column to pop out and displayed under. The content is too crunched up right now, and breaking it into its own full width box would be much better. Is it possible though?
You didn't ask how cells should look for sm viewport (from 768px till 991px) It should look like for md or like for xs?
Here is a snippet for md and xs viewports
.purple {
background: purple;
}
.orange {
background: orange;
}
.green{
background: green;
}
div[class^="col-"]{
height: 100px;
}
#media screen and (min-width: 992px) {
div.orange {
height: 200px !important;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-xs-5 orange">
</div>
<div class="col-md-9 col-xs-7 green">
</div>
<div class="col-md-9 col-xs-12 purple">
</div>
</div>
</div>
Rails newbie here. I am trying to to get a Bootstrap Grid to work correctly in Rails. I want a 3 column responsive grid. See below for example of 1 column:
<div class="box col-lg-3 col-md-4 col-sm-6 col-xs-12">
<h2>Content</h2>
</div>
I am unable to get the div columns to render beside each other, they just stack. Using the html and css outside of rails I am able to get the grid to work as expected.
I am using the following gems:
gem 'rails', '4.0.2'
gem 'bootstrap-sass', '~> 2'
gem 'bootswatch-rails' (I have also tried to do this without bootswatch)
gem 'sass-rails'
I have been trying to fix this for a week and need a hand.
Here is my application.css.scss (I have removed all custom styling, so this is it):
#import "bootswatch/united/variables";
#import "bootstrap";
// Bootstrap body padding for fixed navbar
body { padding-top: 60px; }
// Responsive styles go here in case you want them
#import "bootstrap-responsive";
// And finally bootswatch style itself
#import "bootswatch/united/bootswatch";
I am using the following as my application.html.erb:
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<%= stylesheet_link_tag "application", media: "all",
"data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
<%= render 'layouts/shim' %>
</head>
<body>
<%= render 'layouts/header' %>
<div class="container">
<%= yield %>
<%= render 'layouts/footer' %>
</div>
</body>
Here is my _header.html erb partial:
<header class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<%= link_to "Sweet Potato", '#', id: 'logo' %>
<nav>
<ul class="nav pull-right">
<li><%= link_to "Home", '#' %></li>
<li><%= link_to "Help", '#' %></li>
<li><%= link_to "Sign in", '#' %></li>
</ul>
</nav>
</div>
</div>
</header>
Here is my home page with the grid:
<div class='hero-unit'>
<h1>Sweet Potato</h1>
<h2>Connect, Engage, Reflect</h2>
<h3>
Get the most out of your retreats.
</h3>
</div>
<div class="stuff">
<div class="row">
<div class="box col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<div class="caption">
<h3>Connect</h3>
<p>Connect with the community of meditators</p>
<p><%= link_to "Sign up", '#',
class: "btn btn-primary btn-large btn-block" %></p>
</div>
</div>
</div>
<div class="box col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<div class="caption">
<h3>Engage</h3>
<p>Engage in retreats</p>
<p>Find a Retreat</p>
</div>
</div>
</div>
<div class="box col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<div class="caption">
<h3>Organize</h3>
<p>Organize a retreat</p>
<p>Start a Retreat</p>
</div>
</div>
</div>
</div>
</div>
Lastly here is my _footer.html.erb
<footer class="footer">
<small>
Sweet Potato
is made by McGiver.io
</small>
<nav>
<ul>
<li><%= link_to "About", about_path %></li>
<li><%= link_to "Contact", contact_path %></li>
<li><%= link_to "Help", help_path %></li>
</ul>
</nav>
</footer>
html.erb template:
<div class="container">
<script type="text/x-handlebars" id="sentence">content</script>
</div>
but checked firebug, it becomes
<div class="container"></div>
<div id="ember299" class="ember-view">
blablabla.....
</div>
So, the problem is the script not included by container property
<body>
<script type="text/x-handlebars">
<div class="container">
{{outlet}}
</div>
</script>
<script type="text/x-handlebars" id="sentence">
content
</script>
</body>
Template without id is application template.
application.html.erb
<div class="container" style="margin-top: 28px;">
<%= yield %>
</div>
index.html.erb
<script type="text/x-handlebars" id="sentence">content</script>
And then checked firebug, it becomes
<div class="container"></div>
<div id="ember299" class="ember-view">
blablabla.....
</div>
Use yield
, not {{outlet}}