I'm trying to create a two column layout. The first side should span 9 columns and the next one 3. Inside the col-md-9 I want to nest two more columns, one that spans 4 and another one that spans 8.
<div class="row">
<% #huddles.each do |huddle| %>
<div class="col-md-9">
<div class="row">
<div class="col-md-4">
<img class="img-responsive" src="http://placehold.it/300x150">
</div>
<div class="col-md-8">
<h4><%= huddle.title %></h4>
<h4 class="huddle-description"><%= huddle.description %></h4>
<%= link_to "Read More...", huddle_path(huddle) %>
</div>
</div>
<% end %>
</div>
<div class="col-md-3">Second Column</div>
</div>
This however, comes out looking like this:
Am I nesting my rows and columns wrong? Or maybe it is my ruby code itself that screws up the layout once new "Huddles" are created?
EDIT: With the fixed code, the second column "col-md-3" comes out next to the last created huddle. Inspecting it, all the huddles make one single row.
<div class="row">
<% #huddles.each do |huddle| %>
<div class="col-md-9">
<div class="row">
<div class="col-md-4">
<img class="img-responsive" src="http://placehold.it/300x150">
</div>
<div class="col-md-8">
<h4><%= huddle.title %></h4>
<h4 class="huddle-description"><%= huddle.description %></h4>
<%= link_to "Read More...", huddle_path(huddle) %>
</div>
</div>
</div>
<% end %>
<div class="col-md-3">Second Column</div>
</div>
And looks like this, where the second column moves all the way down next to the last huddle created:
I think this is what you are going for. I am pretty confident the issue is with the html structure and has nothing to do with ruby.
I also want to clarify. The initial issue you were having was that you were starting a div inside the loop but only closing it outside the loop. So starting n amount of divs but only one closing tag, and that would cause it to look like the image you first posted.
<div class="row">
<div class="col-md-9">
<% #huddles.each do |huddle| %>
<div class="show-region" >
<div class="col-md-4" style="height:150px;">
<img class="img-responsive" src="http://placehold.it/300x150">
</div>
<div class="col-md-8" style="height:150px;">
<h4><%= huddle.title %></h4>
<h4 class="huddle-description"><%= huddle.description %></h4>
<%= link_to "Read More...", subjects_path(huddle) %>
</div>
</div>
<% end %>
</div>
<div class="col-md-3">Second Column</div>
</div>
Related
I want to display categories across a single row in my home page but they stack on top of each other instead.
<div class= "container">
<div class="panel panel-primary">
<div class="panel-body">
<div class="col-md-3">
<% Category.take(6).each do |category| %>
<%=link_to category.name, categories_show_path(category: category.name)%>
<% end %>
</div>
</div>
</div>
</div>
why don't you create a row and col according to your requirement, also provide more information so someone can help you solve your problem, you're trying to display 6 categories name in col-md-3, I have updated your code you can check out
<div class="container">
<div class="panel panel-primary">
<div class="panel-body">
<div class='row'>
<% Category.all.take(6).each do |category| %>
<div class="col-md-2">
<%= link_to category.name, categories_show_path(category: category.name) %>
</div>
<% end %>
</div>
</div>
</div>
</div>
I am trying to get my cards to show-up as three in a row and then jump to the next line and put the next three. Right now, it's just putting each card right below the one above it. Can anyone help me out?
<div class="container">
<div class="row">
<div class="col-md-6">
<% #block_busters.each do |movie| %>
<div class="card" style="width: 20rem;">
<img class="card-img-top" src="<%= movie.image_url %>" alt="Card image cap">
<div class="card-body">
<h4 class="card-title"><%=movie.title%></h4>
<p class="card-text"><%=movie.description%></p>
</div>
</div>
<%end%>
</div>
</div>
</div>
You're most likely looking for the 'slice' method, try something like this:
<% #block_busters.each_slice(3) do |slice| %>
<div class="row">
<% slice.each do |movie| %>
<div class="col-md-4"> <!-- 12 cols / 3 cards = 4 -->
<!-- render your cards here, each will show up in rows of 3 -->
</div>
<% end %>
</div>
<% end %>
I need to make a grid, using rails loop. It should look like this:
Usually, without rails loop, I would do it like this:
<div class="row">
<div class="col-lg-6"></div>
<div class="col-lg-6">
<div class="row">
<div class="col-lg-12"></div>
<div class="col-lg-12"></div>
</div>
</div>
</div>
But I need to show in that grid my tips objects:
<% #tips.limit(3).each do |tip| %>
<%= tip.title %>
<% end %>
as an example.
So, what is the best way to do it? Thanks in advance.
EDIT:
Just did like this, but I don't know, whether it is a right decision:
<div class="row">
<div class="col-lg-6">
<div class="tip-big">
<p><%= #tips[0].title %></p>
</div>
</div>
<div class="col-lg-6">
<div class="row">
<div class="col-lg-12">
<div class="tip-medium">
<p><%= #tips[1].title %></p>
</div>
</div>
<div class="col-lg-12">
<div class="tip-medium">
<p><%= #tips[2].title %></p>
</div>
</div>
</div>
</div>
</div>
I have a problem with multiples ajax forms in index view, only first works with remote: true attribute.
This is my index view with a forms
<% #mensagens.each do |mensagem| %>
<%= form_for(mensagem, remote: true,:authenticity_token => true) do |f| %>
<div class="row">
<div class="col-md-9">
<div class="widget">
<!-- BLOCK -->
<div class="row innerAll half border-bottom">
<div class="col-sm-12">
<div class="media-body">
<div class="innerAll half">
<div class='col-md-10'><%= f.number_field :avaliacao %></div>
<div class='col-md-2'><%= mensagem.slug %></div>
</div>
</div>
</div>
</div>
<div class="row innerAll half border-bottom">
<div class="col-sm-12">
<div class="media-body">
<div class="innerAll half">
<%= f.text_area :texto, :class=>"col-md-12 form-control", :placeholder=>"Mensagem" %>
</div>
</div>
</div>
</div>
<div class="row innerAll half border-bottom">
<div class="col-sm-12">
<div class="media-body">
<div class="innerAll half ">
<div class="col-md-2"><%= f.check_box :aprovado %></div>
<div class="col-md-2"><%= f.check_box :status %></div>
<div class="col-md-6 btn"><%= f.text_field :autor,:class=>"form-control", :placeholder=>"Autor" %></div>
<div class="col-md-2"><%= f.submit "Salvar", :class=>"btn btn-success" %></div>
</div>
</div>
</div>
</div>
<div class="row innerAll half border-bottom">
<div class="col-sm-12">
<div class='notyfy_wrapper mensagem_<%= mensagem.id %>'>
<div class="notyfy_message">
<span class="notyfy_text">
<div id="alerta"></div>
</span>
</div>
</div>
</div>
</div>
</div>
<!-- BLOCK -->
</div>
</div>
<% end %>
<% end %>
This is a result: (http://droido.com.br/html.html)
This first form works fine! but second, send a normal request (non-ajax) and redirect to show page!
At droido.com.br/mensagens the second form is nested inside the first. It appears the second This is why it isn't being set up with ajax, as forms are not supposed to be nested, so I expect Rails is not getting to it.
The problem is, based upon your code above, I am not finding any missing close tags. On the page it looks like the <div class='row'> is missing the closing tag. I suggest you knock out a section at a time until you find the problem. Or, delete the entire content and add back until you find it.
Have you used the Chrome dev tools? If not, try it out. Go to the web page, right click, inspect. It will show the tags in a hierarchical manner.
I am working within a Ruby on Rails app. I have a loop that creates divs like this:
<% #snorks.each do |snork| -%>
<div>
<%= snork %>
</div>
<% end %>
And I need the output to have every other div be floated left or right like this:
<div class="left">
Allstar Seaworthy
</div>
<div class="right">
Casey Kelp
</div>
<div class="left">
Dimmy Finster
</div>
<div class="right">
Daffney Gillfin
</div>
<div class="left">
Tooter Shellby
</div>
<div class="right">
Dr. / Uncle Galeo
</div>
Additionally, I need to add a div with class="clear" every two divs, like this:
<div class="left">
Allstar Seaworthy
</div>
<div class="right">
Casey Kelp
</div>
<div class="clear"></div>
<div class="left">
Dimmy Finster
</div>
<div class="right">
Daffney Gillfin
</div>
<div class="clear"></div>
<div class="left">
Tooter Shellby
</div>
<div class="right">
Dr. / Uncle Galeo
</div>
<div class="clear"></div>
I have researched, and found a few posts saying that the alternate classes can be accomplished easily by using cycle(), and that does work. However, when I use it in two places within the loop it stops working right and just outputs something like this:
<div class="left">
Allstar Seaworthy
</div>
<div class="left">
Casey Kelp
</div>
<div class="left">
Dimmy Finster
</div>
<div class="left">
Daffney Gillfin
</div>
<div class="left">
Tooter Shellby
</div>
<div class="left">
Dr. / Uncle Galeo
</div>
What's the best practices way in Ruby on Rails to alternate classes in a loop, and also add something every other loop?
According to the documentation, if you need nested ones you name them. Otherwise they will both share the name "default" and conflict.
<% #snorks.each do |snork| -%>
<div class="<%= cycle('left', 'right') -%>">
<%= snork %>
</div>
<%= cycle('','<div class="clear"></div>', :name=>"cleardiv") %>
<% end %>
The best thing here seems to be using each with index. That way you could do some simple modulus math to determine if the number is odd or even and output the correct class and add the clears.
#snorks.each_with_index do | snork, index|
If index%2 == 0
class = 'left'
else
class = 'right'
end
Well u get my drift and I'm on my phone.
use cycle helper
http://apidock.com/rails/ActionView/Helpers/TextHelper/cycle
<% #snorks.each do |snork| -%>
<div class="<%= cycle("left", "right") -%>">
<%= snork %>
</div>
<% end %>
Edit: for adding new div; following could help
<% #snorks.each_slice(2) do |snork_batch| -%>
<% snork_batch.each do |snork|%>
<div class="<%= cycle("left", "right",:name=>"className") -%>">
<%= snork %>
</div>
<%end%>
<div class="clear"></div>
<% reset_cycle("className")%>
<% end %>