i am wanting to put each result i get from my model into a span 3 using twitter bootstrap, this is what i have done so far but rather than each result alligning vertically they are stacked horizontally. is there anything that i am missing here?
<div class="container">
<div class="row">
<% #recipes.each do |r| %>
<div class="span3">
<div class="thumbnail">
<%= image_tag r.avatar.url(:myrecipes) %>
</div>
<h4><%= link_to r.dish_name, r %></h4>
<hr>
<p><%= r.description %></p>
<p><%= link_to "Edit Recipe", edit_recipe_path(r.id) %></p>
<p><%= link_to "Delete Recipe", recipe_path(r.id), :confirm => "Are you sure?", :method => :delete %></p>
<p><%= link_to "Add to favorites", {:controller => 'favourites', :action => 'create', :recipe_id => r.id}, {:method => :post } %></p>
<% end %>
</div><!--/span3-->
</div><!--/row-->
</div>
move your </div><!-- /span3 --> before the <% end %>.
For now, in your loop you open as many divs as you have recipes objects, but only close one outside of the loop.
Related
I have a search card to search through some profiles. For some reason,one parameter is shown out of the card like shown below:
Even if I exchange the spot of Major and Job type, Major will be displayed out of the card. I'm using the materialize framework. What is the reason for this issue?
My code to show this is:
<div class="col s12 m6 l3">
<div class="card">
<div class="card-content center">
<div style="margin-top: -20px; width: 113%; height: 40px; background-color: #0288d1;margin-left: -21px;">
<span class="card-title2">Advanced search</span>
</div>
<%= simple_form_for #search do |s| %>
<%= s.input :keyword, label: 'Name' %>
<label>College</label>
<%= s.select :college, options_for_select(#college), :include_blank => true %>
<%= s.input :min_gpa, label: "Minimum GPA" %>
<label>Major</label>
<%= s.select :major, options_for_select(#major), :include_blank => true %>
<label>Job type</label>
<%= s.select :level, options_for_select(#level), :include_blank => true %>
<%= s.button :submit, "Search" %>
<% end %>
</div>
</div>
</div>
can you try instead?
<%= s.submit 'Search' %>
I am building a form in Rails4. When I added divs for styling this form, the f.submit button stopped working. I have not changed the controller or the model. Code below. Thanks!
_form in the Plans View
<div class="sidebar-widget">
<div class="Pricing-box">
<div class="price-title spacing-box">
<h4>Create a New Plan</h4>
</div>
<hr>
<div class = "sidebar-form"
<%= form_for(plan) do |f| %>
<div class="name-field">
<%= f.label :name %>
<%= f.text_field :name %>
</div>
<div class="time-field">
<%= f.label :time %>
<%= f.time_field :time %>
</div>
<div class="date-field">
<%= f.label :date %>
<%= f.date_select :date %>
</div>
<div class="restaurant-field">
<%= f.label :restaurant %>
<%= f.collection_select :restaurant_id, Restaurant.all, :id, :name %>
</div>
</div>
<div class="spacing-grid">
<%= f.submit "Create Plan", class: 'btn btn-md btn-black'%>
<% end %>
</div>
</div>
From the Plans Controller: new, index and create actions
class PlansController < ApplicationController
def new
#plan = Plan.new
end
def create
#plan = Plan.create(plan_params)
#plan.users << current_user
redirect_to #plan
end
def index
#plans = Plan.all
#binding.pry
respond_to do |format|
format.html
format.js {}
end
end
From the Plans view, index.html.erb
<section class="ptb ptb-sm-50">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-4 mt-xs-30">
<%= render "plans/form", {plan: Plan.new } %>
<%= render "plans/all_plans", {plans: #plans} %>
</div>
</div>
</div>
</section>
Try modifying your form_for tag so that it looks like this:
<%= form_for #plan, url: {action: "create"} do |f| %>
This is the syntax that the Rails guide recommends - not sure if this will solve your problem or not.
I'm building a layout for my login page and am having problem getting my buttons to line up. I have used a custom class to center my username and password form, and would now like to have 2 equal sized buttons for log in and sign up underneath them. I tried achieving this with col that are half size of the parent, but so far they are just sized the same. Any help on what I'm doing wrong is appreciated.
html:
<div class="col-xs-4 centered">
<%= form_tag sessions_path do %>
<div class="form-group">
<%= label_tag :email %>
<%= text_field_tag :email, params[:email], class:'form-control' %><br/>
<%= label_tag :password %>
<%= password_field_tag :password, nil, class:'form-control' %><br/>
<div class="col xs-2">
<%= submit_tag "Log in", class:'btn btn-primary btnstyle' %>
</div>
<div class="col xs-2">
<%= link_to 'Sign Up', new_user_path, class:'btn btn-primary btnstyle' %>
</div>
<% end %>
</div>
</div>
css:
.btnstyle {
width:100%;
}
.centered {
float: none;
margin: 0 auto;
}
I tried to set up a fiddle, but ofc it won't work with rails tags...
figured it out, had a - missing and had to post them outside of the main col with an offset to center. Here's the final result:
<div class="col-xs-4 centered">
<%= form_tag sessions_path do %>
<div class="form-group">
<%= label_tag :email %>
<%= text_field_tag :email, params[:email], class:'form-control' %><br/>
<%= label_tag :password %>
<%= password_field_tag :password, nil, class:'form-control' %><br/>
</div>
</div>
<div class="col-xs-2 col-xs-offset-4">
<%= submit_tag "Log in", class:'btn btn-primary btnstyle' %>
</div>
<div class="col-xs-2">
<%= link_to 'Sign Up', new_user_path, class:'btn btn-primary btnstyle' %>
</div>
<% end %>
</div>
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.
I am having trouble aligning my caption to the right of my image within a bootstrap thumbnail
My HTML
<div class="container">
<div class="row">
<div class="span8 offset2">
<% #response.each do |f| %>
<% f.each_pair do |k, v| %>
<h3 class="smallTitle">Available on <%= k %></h2>
<% v.each do |film| %>
<div class="thumbnail">
<img src="http://placehold.it/180x200">
<div class="caption">
<%= link_to film[1], film[0] %> : <%= link_to "remind me", "#", :class => 'remind' %>
</div>
</div>
<% end %>
<% end %>
<% end %>
</div>
</div><!--Row-->
</div><!--/container-->
So at the moment my image is to the left and the caption is below the image.. Is there a simple way with css to get the caption to div to sit to the right of the image
You could just float the image and caption within the thumbnail div
<div class="thumbnail clearfix">
<img src="http://placehold.it/180x200" class="pull-left">
<div class="caption" class="pull-right">
<%= link_to film[1], film[0] %> : <%= link_to "remind me", "#", :class => 'remind' %>
</div>
</div>