If you look at the twitter-bootstrap website their jumbotron touches their nav-header. That's what I'm trying to replicate.
I added it to the top of my valuations index like so:
<div class="jumbotron">
<div class="container">
<h1>Values <small>subjective, put here whatever inspires you. </small></h1>
</div>
</div>
I also tried it without the container even though bootstrap says,
"To make the jumbotron full width, and without rounded corners, place it outside all .containers and instead add a .container within."
Is it because my application.html.erb is broken down into columns and so the jumbotron will only expand to the width of the col-md-9?
<body>
<%= render 'layouts/header' %>
<% flash.each do |name, msg| %>
<%= content_tag(:div, msg, class: "alert alert-info") %>
<% end %>
<div class="container-fluid">
<div class="container">
<div class="col-md-9">
<%= yield %>
</div>
<div class="col-md-3">
<% if current_user.present? %>
<%= render 'layouts/sidebar' %>
<% end %>
</div>
</div>
I tried putting in its own partial but then there was padding between the nav-header and the jumbotron that I don't want. Like I said I want it like the bootstrap site. The other problem with a partial is I'd need a lot of them because I want to change the words in the jumbotron depending on the page.
How can we do it like bootstap?
Thanks for your time!
Yes, it's because whatever is rendered in the <%= yield%> gets wrapped in col-md-9. You can either:
close col-md-9 in views where you want to have the full-width jumbotron, and re-open it again in the footer.
don't use col-md-9 in application.rb if most of your views need to be expanding to full width.
EDIT:
To avoid repetition, you can paste the jumbotron styling in between your layouts/header and container-fluid, and use a variable for populating it with page-specific text. Here is what I mean:
<%= render 'layouts/header' %>
<% flash.each do |name, msg| %>
<%= content_tag(:div, msg, class: "alert alert-info") %>
<% end %>
<div class="jumbotron">
<p class="text-center">
<%= #jumbotext %> <!-- this variable should be assigned in your controller action-->
</p>
</div>
<div class="container-fluid">
<div class="container"> <!-- check this too. not sure why you have two containers-->
<div class="col-md-9">
...
Related
I am attempting to create a messaging page on which the text box will sit on the bottom of the page and the messages will be displayed above it. Here is my code for the page:
<div class="ui">
<% #messages.each do |message| %>
<% if message.body %>
<% user = User.find(message.user_id) %>
<div class="item mt-3">
<div class="list">
<div class="item">
<strong><%= user.first_name %></strong>
<div class="content">
<%= simple_format(message.body) %>
</div>
</div>
</div>
</div>
<% end %>
<% end %>
<%= form_for [#conversation, #message], html: {class: "ui reply form"}, remote: true do|f| %>
<%= f.text_area :body, class: "message-box", id: "message-form"%>
<button type="submit", class="send-button", style="display: inline">
<i class="nav-link fa fa-paper-plane"></i>
</button>
<%= f.text_field :user_id, value: current_user.id, type: "hidden" %>
<% end %>
</div>
</div>
The problem is that this code displays like this
The text is running under the text box. My instinct is to place the messages and the text box into two separate boxes and restrict the height of the top one, but I have been attempting this to no avail.
Can anybody suggest how I might be able to get this done?
You should place both in different div's and add 'max-height' to where the text displays.
Also Im assuming this is happening because the text input field is position with position:absolute.
You can make both position:relative and make both display:block. If you want to align the input at the bottom of the screen just use vertical-align
I also think you need to add some custom css styles to the div containing message. Like max-height: 100px and overflow-y: auto;
It would be easier to help you if you could provide fully rendered html instead of a template.
I have created an app in ruby on rails and am using bootstrap ,i am using a 2 column layout ,the problem is the post sizes are unequal and an awkward gap ensues which i want to get rid of.
What my index page currently looks like:
What i want my index page to look like:
my index.html.erb
<div class="container">
<% #posts.each_slice(2) do |posts| %>
<div class="posts-wrapper row">
<% posts.each do |post| %>
<div class="col-lg-4 col-md-offset-1">
<%= post.body %>
</div>
<% end %>
</div>
<% end %>
</div>
Move .row out of the loop and it will be fixed
or try the following code this should also work
<div class="container">
<div class="posts-wrapper row">
<% #posts.each do |post| %>
<div class="col-lg-6">
<%= post.body %>
</div>
<% end %>
</div>
</div>
I would have used JQuery Masonry Library
Trying to get my checkboxes to line up horizontally instead of vertically and I'm having no luck here. The checkboxes and labels are stacking up next to each other as opposed to creating a new line each time.
<div class="form-group">
<%= f.label :phases, class: "col-sm-3 control-label" %>
<div class="col-sm-8">
<%= f.collection_check_boxes :phases, phases, :first, :first %>
</div>
</div>
My form class is form-horizontal and everything else looks fine.
Any suggestions would be greatly appreciated. Thanks!
Add a checkbox-inline class to the label and you are good to go.
<div class="form-group">
<%= f.label :phases, class: "checkbox-inline" %>
<div class="col-sm-8">
<%= f.collection_check_boxes :phases, phases, :first, :first %>
</div>
</div>
From the Bootstrap Wiki
Use the .checkbox-inline or .radio-inline classes on a series of
checkboxes or radios for controls that appear on the same line.
I'm trying to create a grid with text, not images, similar to the 'content section' in the Zurb template: http://foundation.zurb.com/templates/orbit.html
I would like to create three blocks of text on each row.
I am able to create this, but the problem that arises is that sometimes in my data there is only one or two blocks of text for a row.
For example, if a product is missing it's location, is there a way to move ingredients to take the place of location, or if category and location are missing to move ingredients to the place of category?
I'm using Ruby on Rails and Foundation 5.
Thanks!
<div class="row">
<div class="large-4 columns">
<% unless #product.category.nil? %>
<div class="product-heading">Product Category</div>
<div class="product-value">
<%= #product.category %>
</div>
<% end %>
</div>
<div class="large-4 columns">
<% unless #product.location.nil? %>
<div class="product-heading">Product Location</div>
<div class="product-value">
<%= #product.location.sort.join(", ") %>
</div>
<% end %>
</div>
<div class="large-4 columns">
<% unless #product.ingredients.nil? %>
<div class="product-heading">Product Ingredients</div>
<div class="product-value">
<%= #product.ingredients.sort.join(", ") %>
</div>
<% end %>
</div>
</div>
HTML generated from Max Williams' suggestion.
<div class="row">
<div class="large-4 columns">
<div class="product-heading">Product Category</div>
<div class="product-value">Food </div>
</div>
<div class="large-4 columns">
<div class="product-heading">Product Ingredients</div>
<div class="product-value">Flour, Sugar </div>
</div>
</div>
Javascript to try and remove empty li tag
<script>$('li, p')
.filter(function() {
return $.trim($(this).text()) === '' && $(this).children().length == 0
})
.remove();
</script>
The key is to look for repeated elements, and abstract them out, for example by using a loop. eg
<% product_cells = [["Category", #product.category], ["Location", #product.location_string], ["Ingredients", #product.ingredients_string]] %>
<div class="row">
<% product_cells.each do |title, data| %>
<% unless data.blank? %>
<div class="large-4 columns">
<div class="product-heading">Product <%= title %></div>
<div class="product-value"><%= data %> </div>
</div>
<% end %>
<% end %>
</div>
Note that i've put the test in a different place, so the whole large-4 div is skipped if the data is blank.
This sort of thing #product.location.sort.join(", ") should usually be replaced with a method in the Product model, eg
#in Product
def location_string
self.location.reject(&:blank?).sort.join(", ")
end
def ingredients_string
self.ingredients.reject(&:blank?).sort.join(", ")
end
then you could change the above code to
<% product_cells = [["Category", #product.category], ["Location", #product.location_string], ["Ingredients", #product.ingredients_string]] %>
EDIT: changed string methods to cope with nils
EDIT2: changed my original answer to use the model methods i added.
Right now my users are displaying vertically. I would like them to display horizontally side by side. I know this is a very simple to do however, I am having a hard time getting it to be how I would like. Thank you in advance.
User/Index
<div class="page-header">
<center><strong><h1> All Users </h1></strong></center>
</div>
<% #users.each do |user| %>
<div class="user horizontal-align col-md-2">
<%= link_to image_tag(user.avatar.url(:thumb)), user %>
<br><%= link_to user.name, user %></br>
<% if current_user.admin %>
<%= link_to "Delete", user, method: :delete, data: { confirm: "Are you sure?" } %>
<% end %>
<% end %>
</div>
<div class="center">
<%= will_paginate #users, renderer: BootstrapPagination::Rails %>
</div>
User CSS
.user {
width: 200px;
display: inline-block;
}
Try the following:
Isolate .user from the .col-x-x containers. The col containers should be used for layout only. Styling the .user element is overriding the BS3 layout styles.
Remove any width definitions in your CSS for .user. Allow width to fall.
Wrap nested columns with .row
jsFiddle: http://jsfiddle.net/zktfu52t/2/
EX:
<div class="col-md-offset-4 col-md-8 col-lg-8 col-lg-offset-4">
<div class="row">
<% #users.each do |user| %>
<div class="horizontal-align col-md-2">
<div class="user">
<%= link_to image_tag(user.avatar.url(:thumb)), user %>
<br><%= link_to user.name, user %></br>
<% if current_user.admin %>
<%= link_to "Delete", user, method: :delete, data: { confirm: "Are you sure?" } %>
<% end %>
</div>
</div>
<% end %>
</div>
</div>
try this
<div class="col-md-offset-4 col-md-8 col-lg-8 col-lg-offset-4">
<% #users.each do |user| %>
<div class="user col-md-2 col-lg-2 text-center">
<%= link_to image_tag(user.avatar.url(:thumb)), user %>
<p><%= link_to user.name, user %></p>
<% if current_user.admin %>
<%= link_to "Delete", user, method: :delete, data: { confirm: "Are you sure?" } %>
<% end %>
<% end %>
</div>
With this css
.user{
margin:0.2%;
display:block;
}
This will give you 5 across on medium and large screens and vertical stacks on small and extra small screens. A Quick jsFiddle for you.
Also you have unclosed div tags here:
<div class="panel panel-default">
<div class="panel-heading center">
First things first: stop using the center tag. It's deprecated and unreliable. Use CSS for your styling needs.
To get your users displayed horizontally, you need to wrap all of the user details (links, in this case) in some sort of element. A div is probably best. Then you need to set those elements to display: inline-block.