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' %>
Related
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'm building a Real Estate app where users can add amenities like bathrooms, garage, kitchen, etc etc.
The thing is, I want that if the user introduces a number, say 1 bathroom and 1 kitchen and if he leaves in blank the other amenities, it will only display the one he filled. Im using nested attributes:
property.rb model
class Property < ApplicationRecord
belongs_to :owner
has_many :amenities
accepts_nested_attributes_for :amenities
end
amenity.rb model
class Amenity < ApplicationRecord
belongs_to :property
end
show.html.erb
<div class="section">
<div class="row">
<div class="container">
<div class="col l6">
<h5>Description</h5>
<p class="text-justify"><%= #property.description %></p>
</div>
<div class="col l6">
<h5>Amenities</h5>
<!--Nested icons-->
<% #property.amenities.each do |amenity|%>
<div class="col l2">
<div class="center-align">
<i class="material-icons-two-tone px32 no-margin-top-bottom">fitness_center</i>
<p class="no-margin-top-bottom">gym</p>
<p class="no-margin-top-bottom"><%= amenity.gym %></p>
</div>
</div>
<div class="col l2">
<div class="center-align">
<i class="material-icons-two-tone px32 no-margin-top-bottom">fitness_center</i>
<p class="no-margin-top-bottom">kitchen</p>
<p class="no-margin-top-bottom"><%= amenity.kitchen %></p>
</div>
</div>
<% end %>
</div>
</div>
</div>
Property web form
<%= form_with(model: property, local: true) do |form| %>
<% if property.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(property.errors.count, "error") %> prohibited this property from being saved:</h2>
<ul>
<% property.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="section">
<div class="row">
<div class="container">
<div class="col l9">
<div class="col l5">
<div class="input-field">
<i class="material-icons-two-tone prefix">edit</i>
<label for="icon_prefix"><%= form.label :name %></label><br />
<%= form.text_field :name, class:"form-control" %>
</div>
</div>
<div class="col l6">
<div class="input-field">
<i class="material-icons-two-tone prefix">edit</i>
<label for="icon_prefix"><%= form.label :description %></label><br />
<%= form.text_area :description, class:"form-control materialize-textarea" %>
</div>
</div>
<div class="col l2">
<div class="input-field">
<i class="material-icons-two-tone"></i>
<label for="icon_prefix"><%= form.label :price %></label>
<%= form.number_field :price, class:"form-control" %>
</div>
</div>
</div>
<div class="col l12">
<div class="section">
<h5>Amenidades</h5>
<%= form.fields_for :amenities do |amenities_form| %>
<div class="col l2">
<div class="input-field">
<i class="material-icons-two-tone prefix">fitness_center</i>
<label for="icon_prefix"><%= amenities_form.label :gym %></label><br>
<%= amenities_form.number_field :gym %>
</div>
</div>
<div class="col l2">
<div class="input-field">
<i class="material-icons-two-tone prefix">kitchen</i>
<label for="icon_prefix"><%= amenities_form.label :kitchen %></label><br>
<%= amenities_form.number_field :kitchen %>
</div>
</div>
<div class="col l2">
<div class="input-field">
<i class="material-icons-two-tone prefix">garage</i>
<label for="icon_prefix"><%= amenities_form.label :garage %></label><br>
<%= amenities_form.number_field :garage %>
</div>
</div>
<% end %>
</div>
</div>
</div>
</div>
</div>
<div class="section">
<div class="actions center-align">
<%= form.submit class:"waves-effect waves-light btn" %>
</div>
</div>
<% end %>
As you can see I have to duplicate the icons but the problem is that if the user leaves blank the number will not show but the icon will, so I just want to display the icon and the amenity number dynamically.
I will appreciate your help!! :D
In your show.html.erb you can add conditions - I have added for amenity.gym
<div class="section">
<div class="row">
<div class="container">
<div class="col l6">
<h5>Description</h5>
<p class="text-justify"><%= #property.description %></p>
</div>
<div class="col l6">
<h5>Amenities</h5>
<!--Nested icons-->
<% #property.amenities.each do |amenity|%>
<% if amenity.gym.present? %> ----> From Here
<div class="col l2">
<div class="center-align">
<i class="material-icons-two-tone px32 no-margin-top-bottom">fitness_center</i>
<p class="no-margin-top-bottom">gym</p>
<p class="no-margin-top-bottom"><%= amenity.gym %></p>
</div>
</div>
<% end %> -- Till Here
<div class="col l2">
<div class="center-align">
<i class="material-icons-two-tone px32 no-margin-top-bottom">fitness_center</i>
<p class="no-margin-top-bottom">kitchen</p>
<p class="no-margin-top-bottom"><%= amenity.kitchen %></p>
</div>
</div>
<% end %>
</div>
</div>
</div>
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 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 want to iterate that cards I create in show
Here is the code in index :
<div class="container-page">
<div class="padding-page">
<div class="container-fluid" id="start-cards">
<div class="row">
<h1 class="text-center">Let's</h1>
<ul class="list-inline text-center">
<% #hiraganas.each do |hiragana| %>
<li>
<div class="col-sm-3 col-xs-4 col-md-3 container-cards">
<div class="card-details">
<span class="card-question img-popover" data-content="<h4 class='text-center letter-uppercase'><%= #hiragana.upletter %></h4><p class='text-center'><%= #hiragana.transcription %></p>"><i class="fa fa-eye fa-lg"></i></span>
<div class="prononciation"><i class="fa fa-comment"></i></div>
<div class="audioclick">
<p><i class="fa fa-volume-off fa-lg"><%= #hiragana.audioclick %></i></p>
</div>
<div class="card-hiragana hiragana-<%=#hiragana.upletter.downcase.last%>">
<p><%= #hiragana.ideoone %></p>
</div>
<div class="card-katakana">
<p><%= #hiragana.ideotwo %></p>
</div>
</div>
</div>
</li>
<% end %>
</ul>
</div>
</div>
</div>
</div>
I have a problem : better errors tells me [![enter image description here][2]][2] undefined method with 'upletter' which is the method I use to generate letter(s) in popover.
<% #hiraganas.each do |hiragana| %>
<li>
<div class="col-sm-3 col-xs-4 col-md-3 container-cards">
<div class="card-details">
<span class="card-question img-popover" data-content="<h4 class='text-center letter-uppercase'><%= #hiragana.upletter %></h4><p class='text-center'><%= #hiragana.transcription %></p>"><i class="fa fa-eye fa-lg"></i></span>
<div class="prononciation"><i class="fa fa-comment"></i></div>
<div class="audioclick">
<p><i class="fa fa-volume-off fa-lg"><%= #hiragana.audioclick %></i></p>
</div>
Bonjour!
You need:
<%= hiragana.upletter %>
<%= hiragana.transcription %>
In your loop.
-
When using a loop, you need to use the locally scoped variable:
<% #hiraganas.each do |hiragana| %>
<%= hirgana.upletter %>
<% end %>
Any Ruby error with undefined method "..." for "NilClass" basically means you're trying to call methods on a non-declared variable.
In this case, the variable you're trying to use is #hiragana, which doesn't exist. It's local equivalent (hirgana) does.