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>
Related
I am building a dashboard with multiple elements like charts, tables, simple fields with calculated values etc and I want to use Rails7 with stimulus.
In the past I used jQuery so I just created empty elements and then called several ajax requests in paralel to get data for every elements and populate it. So initial page load was super fast and then it loaded all necessary data. Dashboard had few dropdowns options to change data and when I loaded page I just sent defaults. Every dropdown change reloaded all data for all elements by filter used in dropdown.
How to do similar approach with stimulus?
When I use turbo form what I can do is submit form on page load, but it looks ugly (page initially loads and instantly reloads). And if I have many elements it gets slow because it first needs to finish all calculations.
this is my simple filter with 2 dropdowns
<%= form_with url: "", method: :get, data: { controller: "home", home_target: "form", turbo_frame: "home_dashboard", turbo_action: "advance" } do |form| %>
<div class="row">
<div class="d-sm-flex align-items-center mb-3">
<div class="col-lg-2" >
<%= form.select :city, options_for_select(City.all.pluck(:name,:id)), {include_blank: (t 'all')}, {class: 'form-select', data: {action: "input->home#search"}} %>
</div>
<div class="col-lg-2" >
<%= form.select :year, options_for_select(#years.reverse, (params[:year] || Date.today.year)), {selected: params[:year], include_blank:false}, {class: 'form-select', data: {action: "input->home#search"}} %>
</div>
</div>
</div>
<% end %>
and this is my home controller in stimulus which is simple
import { Controller } from "#hotwired/stimulus"
// Connects to data-controller="home"
export default class extends Controller {
connect() {
}
static targets = ["form"]
connect() {
this.formTarget.requestSubmit()
}
search() {
this.formTarget.requestSubmit()
}
}
my rails controller gets ugly big because I am calculating lot of fields dynamically and showing them in turbo frame tag...this is just a part of data I want to show so there should be much more
<%= turbo_frame_tag "home_dashboard" do %>
<div class="row">
<div class="col-xl-6">
<div class="card border-0 mb-3 overflow-hidden ">
<div class="card-body">
<div class="row">
<div class="col-xl-7 col-lg-8">
<div class="mb-3 fs-13px">
<b><%= (t 'invoices.invoiced').upcase %></b>
</div>
<div class="d-flex mb-1">
<% if #invoices_sumed.present? %>
<h2 class="mb-0"><span data-animation="number" data-value="<%= #invoices_sumed[0][1] %>"><%= #invoices_sumed[0][1] %></span> <%= #invoices_sumed[0][0] %></h2>
<% else %>
<h2 class="mb-0"><span data-animation="number" data-value="0">0</span> EUR</h2>
<% end %>
</div>
<div class="mb-3">
<i class="fa fa-caret-up"></i> <span data-animation="number" data-value="<%= #invoices_sumed_compare %>"><%= #invoices_sumed_compare %></span>% <%= t 'invoices.compared_previous_year' %>
</div>
<hr>
<div class="row text-truncate">
<div class="col-6">
<div class=""><%= t 'invoices.total' %></div>
<div class="fs-18px mb-5px fw-bold" data-animation="number" data-value="<%= #invoices.size %>"><%= #invoices.size %></div>
<div class="progress h-5px rounded-3 mb-5px">
<div class="progress-bar progress-bar-striped rounded-right " data-animation="width" data-value="<%= calc_year_ratio(#invoices.size,#invoices_total_size) %>%" style="width: <%= calc_year_ratio(#invoices.size,#invoices_total_size) %>%;"></div>
</div>
</div>
<div class="col-6">
<div class=""><%= t 'invoices.average' %> <small>(<%= (t 'invoices.median').to_s + ":" %> <strong><%= "#{#invoices_median_value.round(2)} #{#invoices_top_currency}" %></strong>)</small></div>
<div class="fs-18px mb-5px fw-bold"><span data-animation="number" data-value="<%= #invoices_avg_value.round(2) %>"><%= #invoices_avg_value.round(2) %></span> <%= #invoices_top_currency %></div>
<div class="progress h-5px rounded-3 mb-5px">
<div class="progress-bar progress-bar-striped rounded-right bg-orange" data-animation="width" data-value="<%= calc_median_total_ratio(#invoices_avg_value,#invoices_max_value) %>%" style="width: <%= calc_median_total_ratio(#invoices_avg_value,#invoices_max_value) %>%;"></div>
</div>
</div>
</div>
</div>
<div class="col-xl-5 col-lg-4 align-items-center d-flex justify-content-center">
<canvas
data-controller="chart"
data-chart-data-value='<%= #chart_total.to_json %>'
data-chart-options-value="<%= #chart_options.to_json %>"
></canvas>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4">
<div class="table-responsive">
<table id="contractors" class="table table-hover align-middle" style="width:100%;">
<thead></thead>
<tbody>
<% #contractors.each do |contractor| %>
<tr>
<td><%= contractor[0]%></td>
<td><%= contractor[2]%></td>
</tr>
<% end %>
</tbody>
</table>
</div>
</div>
</div>
<% end %>
is there any way how to split this in multiple turbo frames with multiple urls to call with one form select change?
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 index page that lists all the homes.I have a Boolean field called active for the homes.We want have a check box on the index page so that a user can check the homes he want to activate.How can this be done??
<div style="margin-top:25px; margin-bottom:150px;">
<div class="container">
<div class="row">
<div class="col-md-2">
<ul class="sidebar-list">
<li class="sidebar-item"><%= link_to "Homes", homes_path, class:"sidebar-link active"%></li>
</ul>
</div>
<div class="col-md-10">
<div class="panel panel-default">
<div class="panel-heading" style="background-color:#6dae4e;">
Homes(<%= #homes.length %>)
</div>
<div class="panel-body">
<% #homes.each do |home| %>
<div class="row">
<div class="col-md-2">
<%= image_tag home.home_photos[0].image.url if home.home_photos.length > 0 %>
</div>
<div class="col-md-2">
<h4><%= link_to home.name, home %></h4>
</div>
<div class="col-md-3 right">
<%= link_to "Edit", edit_home_path(home), class: "btn btn-green"%>
</div>
</div>
<hr/>
<% end %>
</div>
</div>
</div>
</div>
</div>
Use a check_box_tag
http://apidock.com/rails/ActionView/Helpers/FormTagHelper/check_box_tag
<%= check_box_tag 'active' %>
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>