I have a rails blog that I am trying to display my posts in 3 different columns on. When using in_groups_of I am able to make the logic work by replacing #posts with a sample array like [0,1,2,3,4,5,6] and it will display the numbers in three items per row, but when I use my posts (which contain images - I don't know if that matters), it displays them one per row. Any ideas for how to solve this?
<div class='posts'>
<% #posts.in_groups_of(3, false).each do |group| %>
<div class="row">
<div class="three columns">
<% group.each do |post| %>
<div class='titleTxt'>
<%= link_to post.title, post_path(post.id) if post %>
</div>
<div class='bodyTxt'>
<%= raw post.body if post %>
</div>
<% end %>
</div>
</div>
<% end %>
</div>
Related
I have a view where I make 2 loops to output the information. One as a menu and another as data:
<div class="base-form side-menu">
<ul class="food-groups">
<% #food_categories.each do |category| %>
<li class="<%= "#{Food::CATEGORIES[category]}"%>" data-content=".<%= "#{Food::CATEGORIES[category]}-content"%>"> <%="#{category}"%> </li>
<% end %>
</ul>
</div>
<div class="base-form main-form">
<% #food_categories.each do |cat| %>
<%= "#{Food::CATEGORIES[cat]}-content" %>
<div class="<%= "#{Food::CATEGORIES[cat]}-content"%>">
<% #foods.where(category: "#{Food::CATEGORIES[cat]}").find_each do |food| %>
<p>
<%= "Name: #{food.name}, portion: #{food.portion}, calories: #{food.calories}" %>
</p>
<% end %>
</div>
<% end %>
</div>
First loop works fine, each element gets its class correctly. Second loop(with |cat|) works, but the div's don't get any classes assigned. I even copied the class="<%=...%>" to the 't' from the first loop and it still doesn't work! Although just putting the string on the page that I'm also passing as a class works fine. I don't get it!
I am writing a basic Rails application to keep track of homework (Basically just a database interface). I am using the grid system from the Materialize CSS framework (the same as Bootstrap, 12 columns). When I collect records from the database (pieces of homework) I want to display them so that it will try to split each row into 3 divs of 4 columns, if there are only two records on the last row then it should split them into two divs of 6 columns and if there is only one record on the last row then it should show it as one div of 12 columns.
Here is my attempt:
<% count = 1 %>
<% #homeworks.each do |homework| %>
<% if #homeworks.length - count > 0 then %>
<div class="col s12 m4">
<% count = count + 1 %>
<% elsif #homeworks.length - count == 1 then %>
<div class="col s12 m6">
<% else %>
<div class="col s12 m12">
<% end %>
<a href="<%= homework_path(homework) %>">
<div class="card-panel hoverable">
<center><h5 class="cutoff"><%= homework.title %></h5></center><br>
<%= truncate(homework.content, :length => 17, :separator => ' ') %>
</div>
</a>
</div>
<% end %>
This worked fine for 5 records:
However, with 6 records I get this result:
Can anybody point me in the right direction? Thank you.
I don't entirely understand your logic with the count variable, but that's not how I'd approach the problem regardless - there's a much simpler and cleaner way: Use Enumberable#each_slice.
Your code will look something along the lines of:
<% #homeworks.each_slice(3) do |homeworks_row| %>
<% if homeworks_row.length == 3 %>
<% width_class = "m4" %>
<% elsif homeworks_row.length == 2 %>
<% width_class = "m6" %>
<% else %>
<% width_class = "m12" %>
<% end %>
<% homeworks_row.each do |homework| %>
<div class="col s12 <%= width_class %>">
<a href="<%= homework_path(homework) %>">
<div class="card-panel hoverable">
<center><h5 class="cutoff"><%= homework.title %></h5></center><br>
<%= truncate(homework.content, :length => 17, :separator => ' ') %>
</div>
</a>
</div>
<% end %>
<% end %>
Each homeworks_row will contain either 1, 2 or 3 homeworks - meaning you can simply choose the column width, based on the length of the row.
You may also want to improve this code by wrapping that if statement into a helper method, i.e. your template will include the line:
<div class="col s12 <%= width_class(homework_row.length) %>">
...but I'll leave this here as one block of code for simplicity.
Is there a way that I can insert HTML tags with embedded Ruby?
I'm trying to loop over items in my database and need to put them in a bootstrap grid.
<% #div = "</div> <div class='row'> <div class='col-md-3'>" %>
<% #end = "</div>" %>
<div class="row">
<% #branches.each_with_index do |b, index| %>
<div class="col-md-3">
<div class="cardje transition">
<h2 class="transition"><%= b.description %></p>
<div class="cta-container transition">Import branch</div>
<div class="cardje_circle transition"></div>
</div>
</div>
<% if index+1%4 == 0 %>
<%= #div.html_safe %>
<% end %>
<% if index+1 == #branches.count %>
<% #end.html_safe %>
<% end %>
<% end %>
There must be a simpler way but I need this page to be done by tomorrow morning and I've been working way too long.
When I check the source code it's running only the loop and never implementing anything (so everything is on one row and overlapping).
I have been trying to make a number of lists where after clicking each list its content gets edited. I'am using twitter bootstrap, embedded HTML in this Ruby on Rails app.
<div class="list-group">
<% #statuses.each do |status| %>
<%= status.content %>
<% end %>
</div>
Here i did not get how to get these <%= link_to to get connected with each <a href="" URL's of the status.
<%= link_to 'Edit', edit_status_path(status) %>
Please help i m totally confused.
Thanks in advance.
If you want the entire status to actually be a link, like you did with a manual anchor tag in your example, then try:
<div class="list-group">
<% #statuses.each do |status| %>
<%= link_to status.content, edit_status_path(status), class: "list-group-item" %>
<% end %>
</div>
Also see http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-link_to.
i'm in rails with bootstrap.
i have a product site with many products. i need to display my products in a grid format for the "store front". each product has a photo and some info.
i saw this post and this post but they are not what i'm looking for.
i am trying to iterate over each product using product.each while attempting to use bootstrap's grid system.
i will need to add additional products as time goes on and therefore need each product to flow from one row to the next.
i have not used any additional css styling outside of bootstrap.
as of now, i appears that each products is dropping to next row and that each product is inside it's own column, but any attempt i make to resize the image or the div or col that each product is inside, everything becomes misaligned.
here is my html.erb file:
<div class="row">
<% #products.each do |product| %>
<div class="col-md-3">
<div id="storeimages">
<%= image_tag(product.image_url, class: "img-responsive") %>
<h3><%= product.title %></h3>
<div><%= sanitize(product.description) %></div>
<div><%= number_to_currency(product.price) %></div>
<%= button_to 'Add to Cart', line_items_path(product_id: product),
class: 'btn btn-info btn-sm', remote: true %>
</div>
</div>
<% end %>
</div>
Assuming you want rows of 4 columns, you could do something like this:
<% #products.in_groups_of(4, false).each do |group| %>
<div class='row'>
<% group.each do |product| %>
<div class='col-md-3'>
<%= image_tag(product.image_url, class: "img-responsive") %>
<h3><%= product.title %></h3>
<div><%= sanitize(product.description) %></div>
<div><%= number_to_currency(product.price) %></div>
<%= button_to 'Add to Cart', line_items_path(product_id: product), class: 'btn btn-info btn-sm', remote: true %>
</div>
<% end %>
</div>
<% end %>
This splits your data set up into groups of 4 items, then outputs a row div for each group. Then within each row, it outputs each member of the group in its own column div.
The false passed in to in_groups_of ensures that you don't try to output a column for a row where there are less than 4 items. This would happen on your last row if your total number of products was not exactly divisible by 4 since by default the function will pad out the array with nil.
Thanks to #vermin for the fill_with tip!
i also added the following css.
for the div.col-md-3:
#productdescription {
height: 375px;
width: 200px;
}
and for the image:
#img {
height: 200px;
width: 180px;
overflow: hidden;
}