Currently I am making a twitter clone using RubyOnRails and bootstrap as the framework. When trying to distribute some text in a post panel using the "col-sm" div class, the text seems jammed together on the left,
as seen here.
Here is my code:
<div class="row">
<div class="col-xs-3">
<div class="panel panel-default">
<div class="panel-body">
<p>status</p>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<p>trend</p>
</div>
</div>
</div>
<div class="col-xs-6">
<%= render '/components/post_form' %><br></br>
<% for #p in #posts %>
<div class="panel panel-default post-panel">
<div class="panel-body">
<div class="col-sm-1">
AVATAR
</div>
<div class="col-sm-11">
<p><%= #p.content %></p>
</div>
<div class="col-sm-12">
LINKS
</div>
</div>
</div>
<% end %>
</div>
<div class="col-xs-3">
<div class="panel panel-default">
<div class="panel-body">
<p>about</p>
</div>
</div>
</div>
</div>
I am using the latest bootstrap sass version 3.3.6 which is included in the gemfile. Is there something wrong with the code or does the latest version of bootstrap mean I need to do something different?
Look at this section:
<div class="col-sm-1">
AVATAR
</div>
<div class="col-sm-11">
<p><%= #p.content %></p>
</div>
<div class="col-sm-12">
LINKS
</div>
The first issue is the text "AVATAR" is wider than 1 bootstrap column, so it's extending out of your container. using col-sm-2/col-sm-10 may fix the issue.
Second, column sizes should add up to 12 columns per row. Here you have a col-sm-1, col-sm-11, and col-sm-12 all in the same row.
Related
I've read the documentation for hours and checked all demos and also searched SO but I can't figure out how to achieve the below layout:
This is what I've done and the output result looks like what I need but I'm not sure it is the correct way or not:
<div class="container">
<div class="row">
<div class="w-75 rounded bg-dark">
<p>
This is a sample
</p>
</div>
<div class="w-25">
<div class="col rounded bg-dark">
<p>
This is a sample
</p>
</div>
<div class="col rounded bg-dark">
<p>
This is a sample
</p>
</div>
</div>
</div>
</div>
The output is here: https://jsfiddle.net/ezt5fyL1/
The correct way is to nest the grid...
<div class="container">
<div class="row">
<div class="col-9 rounded bg-dark">
<p> This is a sample </p>
</div>
<div class="col-3">
<div class="row gy-1 gx-1">
<div class="col-12 rounded bg-dark">
<p> This is a sample </p>
</div>
<div class="col-12 rounded bg-dark">
<p> This is a sample </p>
</div>
</div>
</div>
</div>
</div>
codeply
I'm not sure where put the start and end of my iteration
Im using bootstrap frame work and its supposed to look like this
what bootstrap looks like
<div class="row row-cols-1 row-cols-md-3">
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
This is what mine looks like
what mine loos like
<div class="row row-cols-1 row-cols-md-3">
<% #apparels.each do |apparel| %>
<div class="col mb-4">
<div class="card h-100">
<%= image_tag apparel.picture, class: 'card-img-top', width: 300 if apparel.picture.attached?%>
<div class="card-body">
<h5 class="card-title"> <%= apparel.brand %> <%= apparel.model %></h5>
<p class="card-text">Size: <%= apparel.size %><br>$<%= apparel.price %></p>
</div>
</div>
</div>
<% end %>
</div>
Not sure what I'm doing wrong
Since you want each 3 boxes per-row, you can change line 3 to col-md-4, total each column is 12, so 12/4 = 3 it will automatically moving to next row
<div class="row row-cols-1 row-cols-md-3">
<% #apparels.each do |apparel| %>
<div class="col-md-4">
<div class="card h-100">
<%= image_tag apparel.picture, class: 'card-img-top', width: 300 if apparel.picture.attached?%>
<div class="card-body">
<h5 class="card-title"> <%= apparel.brand %> <%= apparel.model %></h5>
<p class="card-text">Size: <%= apparel.size %><br>$<%= apparel.price %></p>
</div>
</div>
</div>
<% end %>
</div>
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'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>
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.