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>
Related
I'm working on a ruby on rails article page, I want to display four articles on front page as seen in my html/css/bulma code below, my question is how do I make users navigate to older articles with the post Navigation class code (1,2,3,4,5) beneath the articles, Thanks.
<section class="section blog-wrap">
<div class="container">
<div class="columns is-multiline">
<% #articles.each do |article| %>
<div class="column is-6-desktop is-6-tablet">
<div class="blog-item has-text-centered mb-3">
<%= image_tag("https://source.unsplash.com/random/1100x500", :alt => "rss feed", :class => "mb-4 rounded") %>
<h3 class="mb-2"> <%= link_to article.title.capitalize, article%></h3>
<div class="blog-item-meta ">
<span class="is-uppercase text-sm mr-3 letter-spacing">by themefisher</span>
<span class="is-uppercase text-sm letter-spacing"><i class="ti-time mr-1"></i> January 28,2019</span>
</div>
<p class="mt-3 mb-4"><%= render article %></p>
<%= link_to 'Read More', article, class: "btn btn-main" %>
</div>
</div>
<% end %>
</div>
<div class="columns mt-5 is-justify-content-center">
<div class="column is-8-widescreen has-text-centered">
<nav class="post-navigation">
<a class="current" href="#">1</a>
2
3
4
5
<i class="ti-angle-right"></i>
</nav>
</div>
</div>
</div>
</section>
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;
}
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.
Can someone please explain to me why this is happening? My mobile views work fine but it breaks to the attached pic when I expand the window.The code for both cards is literally identical as shown below:
<!-- This is the view for the page: -->
<div class="col-12 col-md-9">
<div class="col-12 d-flex align-items-center mb-3">
<span class="h2"> Spread the Knowledge </span>
<%= link_to fa_icon("edit"), new_discussion_path, class: "profile-link fa-2x" %>
</div>
<div class="col-xs-12 col-md-9 mb-4">
<div class="card">
<div class="card-header">
<h4>Answered Questions</h4>
</div>
<div class="list-group list-group-flush">
<%= render "answered_disc" %>
</div>
<div class="card-footer text-center d-none">
See all
</div>
</div>
</div>
<div class="col-xs-12 col-md-9 mb-4">
<div class="card">
<div class="card-header">
<h4>Unanswered Questions</h4>
</div>
<div class="list-group list-group-flush">
<%= render "unanswered_disc" %>
</div>
<div class="card-footer text-center d-none">
See all
</div>
</div>
</div>
</div>
Both partials display the following code:
<% #discussions.each do |discussion| %>
<% if discussion.parent_id.nil? && discussion.resolved == true %>
<div class="list-group-item">
<div class="row">
<div class="wadinfo col-xs-12 col-md-9 mb-4">
<%= link_to discussion_path(discussion), class: 'profile-link' do %>
<h6 class="small"><%= discussion.content %></h6>
</div>
<% end %>
</div>
<div class="actions">
<% if discussion.resolved == false %>
<%= link_to 'Answer', discussion_path(discussion), class: 'profile-link' %>
<% else %>
<%= link_to 'Contribute', discussion_path(discussion), class: 'profile-link' %>
<% end %>
</div>
</div>
</div>
<% end %>
<% end %>
<!-- Code for menu -->
<div class="row row-sidebar">
<div class="col-12 mb-3 text-center">
</div>
<div class="col-12">
<ul class="list-group">
<% sidebar_elements.each do |element| %>
<a class="list-group-item list-group-item-action" href="<%= element[:link] %>">
<%= element[:name] %>
</a>
<% end %>
</ul>
</div>
</div>
The sidebar is rendered as a partial in a manifest file:
<% content_for :sub_layout do %>
<div class="row mt-4">
<div class="d-none d-md-flex col-3 align-items-start">
<%= render "wads/sidebar" %>
</div>
<%= yield %>
</div>
<% end %>
<%= render template: 'layouts/application' %>
Very confused as the code is identical
When I try to pretty format your partial erb code, it seems broken. I guess it can be the reason because the browser will try to correct the broken HTML, hence the structure might go wrong
<!-- This block seems broken -->
<div class="wadinfo col-xs-12 col-md-9 mb-4">
<%= link_to discussion_path(discussion), class: 'profile-link' do %>
<h6 class="small"><%= discussion.content %></h6>
</div>
<% end %><!-- The link_to block has an incorrect closing </div> -->
</div>
I think after correcting it, your code should work as expected.
Try placing the divs with class col-xs-12 in separate rows, i.e. in divs with class row:
Your code:
<div class="col-xs-12 col-md-9 mb-4">
<div class="card">
...
Fixed code:
<div class="row">
<div class="col-xs-12 col-md-9 mb-4">
<div class="card">
...
Hello I want to keep my column in the same place when minimizing the screen width. How can I keep the div from moving to the bottom?? Is there a way to keep it set in that position so that the user has to scroll right or left in order to see the rest when its minimized? For example when you create a question there is a box on the right named "similar questions," when i minimize the width the box stays in the position and becomes hidden until you scroll to the right.
Before
After
Html page
<div class="container3" style="padding-top:50px;" >
<div class="row" style="" >
<div class="col-md-4" style="background-color:#DDDDDD;height:100%;border-radius: 4px;min-width:360px;">
<!-- Make an if statement for online and offline -->
<div class="row center">
<% if #user.online? %>
<div class="btn btn-block" id="available">
Online Now
</div>
<% else %>
<div class="btn btn-block" id="unavailable" style="background-color:#990000;">
Offline
</div>
<% end %>
<div id="contain-pic">
<div class="thumbnail" style="width:300px;height:300px;overflow:hidden;background-color:black;">
<%= image_tag #user.avatar.url(:medium), :id => "image-tag", class: "portrait" %>
</div>
</div>
<div id="average_rating"></div>
<script>
$('#average_rating').raty({
path: '/assets',
readOnly: true,
score: <%= #user.reviews.average(:star) %>
});
</script>
</div>
<div class="row " style="margin-left:20px;">
<div class="row" >
<div class="col-md-3" >
<h2 style="font-size:20px;margin:0 auto;">Country:</h2>
</div>
<% if #user.country != nil %>
<div class="col-md-8" style="margin-left:30px;">
<h><%= #user.country %></h>
</div>
<% else %>
<div class="col-md-8" style="margin-left:30px;height:20px;line-height:25px;">
<h>N/A</h>
</div>
<% end %>
</div>
<div class="row">
<div class="col-md-3">
<h2 style="font-size:20px;margin:0 auto;">University:</h2>
</div>
<% if #user.school != nil %>
<div class="col-md-8" style="margin-left:30px;">
<h><%= #user.school %></h>
</div>
<% else %>
<div class="col-md-8" style="margin-left:30px;height:20px;line-height:25px;">
<h>N/A</h>
</div>
<% end %>
</div>
<% if #user.major != nil %>
<div class="row">
<div class="col-md-3">
<h2 style="font-size:20px;margin:0 auto;">Major:</h2>
</div>
<div class="col-md-8" style="margin-left:30px;height:20px;line-height:25px;">
<h><%= #user.major %></h>
</div>
</div>
<% end %>
<% if #user.occupation != nil %>
<div class="row" >
<div class="col-md-3" >
<h2 style="font-size:20px;margin:0 auto;margin-right:10px;">Occupation:</h2>
</div>
<div class="col-md-8" style="margin-left:30px;height:20px;line-height:25px;">
<h style=""><%= #user.occupation %></h>
</div>
</div>
<% end %>
<% if #user.company_name != nil %>
<div class="row" >
<div class="col-md-3" >
<h2 style="font-size:20px;margin:0 auto;">Company:</h2>
</div>
<div class="col-md-8" style="margin-left:30px;height:20px;line-height:25px;">
<h><%= #user.company_name %></h>
</div>
</div>
<% end %>
</div>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-4">
<h2 style="font-size:40px;"> <%= #user.username %></h2>
</div>
<div class="col-md-4">
<div class="msg-btn">
<%= link_to 'Send message', new_message_path(to: #user.id), class: 'btn btn-primary' %>
</div>
</div>
<div class="row col-md-10" style="height:150px;max-height:300px;margin-left:75px;margin-top:20px;">
<label style="font-weight:bold;font-size:20px;">About Me</label>
<div class="description" style="overflow:auto;height:130px;max-height:130px;">
<% if #user.description != nil %>
<%= #user.description %>
<% else %>
<p> There is no description...... </p>
<% end %>
</div>
</div>
</div>
<div class="row col-md-12" style="height:230px;max-height:270px;margin-top:15px;" id="introduction">
<div class="col-md-6">
<% if #user.school_description != nil %>
<h3> School Experience </h3>
<p><%= #user.school_description %></p>
<% else %>
<% end %>
</div>
<div class="col-md-6">
<% if #user.occupation_details != nil %>
<h3> Job Experience </h3>
<p><%= #user.occupation_details %></p>
<% else %>
<% end %>
</div>
</div>
<div class="col-md-12">
<div class="row center">
<h2 >I am available to revise these types of papers</h2>
</div>
<div class="row" style="margin-top:30px;">
<% #user.revisers.each do |reviser| %>
<%= link_to reviser do %>
<div class="col-sm-6">
<div style="border: 3px solid grey;width:300px;max-width:300px;height:165px;max-height:165px;margin:10px;">
<div>
<div class="row">
<h2 style="color:black;" class="center"><%= reviser.try(:essay_type) %></h2>
</div>
<div class="row">
<div class="col-sm-3">
<%= render 'shared/essayicons', reviser: reviser %>
</div>
<div class="col-sm-3">
</div>
</div>
</div>
</div>
</div>
<% end %>
<% end %>
</div>
</div>
<div class="col-md-12" style="margin-top:20px;margin-bottom:40px;">
<h4>Reviews</h4>
<% #revisers.each do |reviser| %>
<% if !reviser.reviews.blank? %>
<% reviser.reviews.each do |review| %>
<div class="row">
<div class="col-md-2 text-center">
<%= image_tag review.user.avatar.url(:medium), :id => "image-tag", class: "img-circle thumbnail2" %><br>
<%= review.user.username %>
</div>
<div class="col-md-10">
<%= link_to reviser.essay_type, reviser %><br>
<%= review.comment %><br>
<%= review.created_at.strftime("%v") %>
</div>
</div>
<% end %>
<% end %>
<% end %>
</div>
</div>
</div>
</div>
If you set a min-width on a parent element, it will give you the effect you're after. In your case, that would probably be '.container3' or 'body'.
.container3{
min-width: 1440px;
}
or
body{
min-width: 1440px;
}
Note: the value for min-width can be whatever you want.