I have a loop that iterates through a list of stories but it's generating one row per story and not 3 columns. What am I missing?
<div class="row">
<div class="col-md-4">
<% #stories.each do |story| %>
<h2><%= story.name.titleize %></h2>
<%= image_tag story.pictures.first.image(:medium).to_s, class: "img-responsive" %>
<%= link_to "View Story", story_path(story) %>
<% end %>
</div>
</div>
Thanks.
I think you're placing the each loop in the wrong place. Try something like:
<div class="row">
<% #stories.each do |story| %>
<div class="col-md-4">
<%= content_tag :h2, story.name.titleize %>
<%= image_tag story.pictures.first.image(:medium).to_s, class: "img-responsive" %>
<%= link_to "View Story", story_path(story) %>
</div>
<% end %>
</div>
Take a look to each_slice
#stories = [story1, story2, story3, story4, story5, story6, story7, story8]
#stories.each_slice(3).to_a
#=> [[story1, story2, story3], [story4, story5, story6], [story7, story8]]
I think you can try this:
<% #stories.each_slice(3).to_a.each do |row_stories| %>
<div class="row">
<% row_stories.each do |story| %>
<div class="col-md-4">
<%= content_tag :h2, story.name.titleize %>
<%= image_tag story.pictures.first.image(:medium).to_s, class: "img-responsive" %>
<%= link_to "View Story", story_path(story) %>
</div>
<% end %>
</div>
<% end %>
Related
This code is written in haml template, how can I rewrite it to erb:
- #recipe.each_slice(3) do |recipes|
.row
- recipes.each do |recipe|
.col-md-4
.recipe
.image_wrapper
= link_to recipe do
= image_tag recipe.image.url(:medium)
%h2= link_to recipe.title, recipe
It may looks like this:
<% #recipe.each_slice(3) do |recipes| %>
<div class="row">
<% recipes.each do |recipe| %>
<div class="col-md-4">
<div class="recipe">
<div class="image_wrapper">
<%= link_to recipe do %>
<%= image_tag recipe.image.url(:medium) %>
<% end %>
<h2><%= link_to recipe.title, recipe %></h2>
</div>
</div>
</div>
<% end %>
</div>
<% end %>
I am trying to do simple quiz using Rails and Bootstrap, but I have problem with checkboxes being too wide on small screens and it covers label of that checkbox (.
My view looks like this:
<div class="center jumbotron">
<h2><%= t(:quiz) %></h2>
<div>
<%= form_for(:test, url: quiz_path) do |f| %>
<% #quiz.tasks.each_with_index do |task, index| %>
<div>
<% if task = Task.find_by(id: task) %>
<%= image_tag(task.asset, class: "img-responsive") %>
<%= task.text %>
<% answers = task.correct_answers + task.wrong_answers %>
<% answers.shuffle! %>
<fieldset>
<!-- Dodać półotwarte -->
<% answers.each do |answer| %>
<div class="checkbox">
<%= f.check_box("task#{index}", {class: "checkbox", multiple: true}, answer, nil)%>
<%= f.label "task#{index}", answer %>
</div>
<% end %>
</fieldset>
<% end %>
</div>
<% end %>
<%= f.submit t(:finish_quiz), class: "btn btn-lg btn-primary" %>
<% end %>
</div>
</div>
How do I make it look normal a.k.a. like desktop version, just bigger (square-like of course)?
so my question is how can i enable this piece of code only when i want? I have multiple pages and some pages i need to remove that piece of code.
This is my current partial _navbar.html.erb and div.spotlight is the piece of code i need to disable in some pages
<div class="container">
<nav class="logonav">
<div class="row">
<div class="col50"><span class="logo"></span>
<h2>Musicus</h2>
<p>De ti para o mundo</p>
</div>
<% if user_signed_in? %>
<div class="col50">
<%= link_to 'Logout', destroy_user_session_path, class: 'ui-btn btn-normal', method: :delete %>
</div>
<% else %>
<div class="col50">
<%= link_to new_user_registration_path, class: 'ui-btn btn-accent' do %>
<span class="icon-add-user"></span> Criar Conta
<% end %>
<%= link_to new_user_session_path, class: 'ui-btn btn-normal' do %>
<span class="icon-login"></span> Login
<% end %>
</div>
<% end %>
</div>
</nav>
<div class="spotlight">
<%= yield :other_message %>
<%= render 'search' %>
<%= yield :primary_message %>
</div>
<%= yield :other_nav %>
</div>
You can use a simple if statement:
<% if show_spotlight %>
<div class="spotlight">
<%= yield :other_message %>
<%= render 'search' %>
<%= yield :primary_message %>
</div>
<% end %>
I want to generate all my products and their information on a page using bootstrap's grid system. I tried to generate three products in a row at first and it worked using the following code:
<div class="container">
<h1 align="center">Listing products</h1>
<% #products.each do |product| %>
<% if #a%3 == 0 %>
<div class="row">
<% end %>
<div class="col-lg-4">
<%= image_tag(product.image_url, class: 'list_image', size: '260x320') %>
<%= product.title %> <br/>
<%= product.price %> <br/>
<%= link_to 'Show', product %><br/>
</div>
<% #a = #a+1 %>
<% if #a%3 == 0 %>
</div><hr/>
<% end %>
<% end %>
</div>
(#a is what I declared in the controller which is initially set to 0)
The code will not work anymore if I want to only display two or less products in a row using the grid system when the screen gets smaller.
Are there any better ideas to achieve this?
Seems like you are generating incorrect HTML markup. Try to use each_slice:
<div class="container">
<h1 align="center">Listing products</h1>
<% #products.each_slice(3) do |products| %>
<div class="row">
<% products.each do |product| %>
<div class="col-lg-4">
<%= image_tag(product.image_url, class: 'list_image', size: '260x320') %>
<%= product.title %> <br/>
<%= product.price %> <br/>
<%= link_to 'Show', product %><br/>
</div>
<% end %>
</div>
<hr/>
<% end %>
</div>
I have a row which displays projects, now i need to add an icon to the end if the number of items exceed 6. How can write a condition here to check if the project count is greater than 6 then instead of adding the projects i append a icon.
<div class="row">
<% #projects.each do |project| %>
<div class="col-sm-2 col-xs-1">
<%= link_to project.name, project_url(project.project_id),
class: ('active' if current_page?(project_path(project.project_id)) ) %>
</div>
<% end %>
</div>
You could try using each_with_index and then have a conditional in the loop to detect when you're on the 6th loop (first loop begins with zero for the index value).
Something like this:
<div class="row">
<% #projects.each_with_index do |project, index| %>
<% if index > 5 >
<!-- show icon -->
<% else %>
<div class="col-sm-2 col-xs-1">
<%= link_to project.name, project_url(project.project_id),
class: ('active' if current_page?(project_path(project.project_id)) ) %>
</div>
<% end %>
<% end %>
</div>
I think this is what you want. If not then feel free to ask for change.
<% if #projects.size > 6 %>
###put your icon here
<% else %>
<div class="row">
<% #projects.each do |project| %>
<div class="col-sm-2 col-xs-1">
<%= link_to project.name, project_url(project.project_id),
class: ('active' if current_page?(project_path(project.project_id)) ) %>
</div>
<% end %>
</div>
<% end %>
You can use 'each_with_index' instead of each , like this
<%#images.each_with_index do |page, index| %>
<% if index > 5 %>
//here put your code to add icon
<%else%>
<%= link_to project.name, project_url(project.project_id),
class: ('active' if current_page?(project_path(project.project_id))
<%end%>
<%end%>
I think it will help you