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.
Related
I'm trying to implement the following design, using Rails 7 with Tailwindcss:
I'm new to Taildwincss and I realize there are many ways to achieve this design. However I cannot fully replicate it. This is the code I'm using in my view:
<div class="grid gap-1 grid-cols-12 grid-rows-1">
<% #user.each do |user| %>
<% if user.photo? %>
<div class="p-5 col-span-2">
<div class="bg-white p-5 rounded-lg shadow-lg">
<%= image_tag "user_photo.png", width: 100 %>
</div>
</div>
<% else %>
<%# ToDo: %>
<%# image_tag user.photo, width: 100 %>
<% end %>
<div class="p-5 col-span-10">
<div class="bg-white p-5 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold mb-2 text-gray-800"><%= user.name %></h2>
<p class="text-gray-700 text-right">Number of posts: <%= user.posts.count %></p>
</div>
</div>
<%end%>
</div>
And this is the result:
What could I change to get a bit closer to the wireframe?
Keep both the div containing both the image and card in flex and add item-center class to it.
Refer to this pseudo code
<div class="flex flex-row item-center">
<div class="bg-white rounded-lg shadow">Image</div>
<div class="bg-white rounded-lg shadow">
card
</div>
</div>
And here is the solution code
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-row items-center">
<div class="p-10">
<div class="rounded-lg bg-gray-200 p-10 shadow-lg">%></div>
</div>
<div class="p-5">
<div class="rounded-lg bg-gray-200 p-5 shadow-lg">
<h2 class="mb-2 text-2xl font-bold text-gray-800">Lily</h2>
<p class="ml-28 text-right text-gray-700">Number of posts: 2</p>
</div>
</div>
</div>
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>
Im using a bootstrap collapse item and have the code set up like this:
<% #tasks.each do |task| %>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1"><%= task.title %><p style="text-align:right;"><span class="glyphicon glyphicon-chevron-down"></span></p></a>
<p class="taskdescription"><%= task.description %></p>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<ul class="list-group">
<% task.subtasks.each do |subtask| %>
<li class="list-group-item"><%= subtask.title %></li>
<% end %>
</ul>
</div>
</div>
</div>
<% end %>
Which is outputting the correct list but with each item i need to increment the value of the div:
<div id="collapse1" class="panel-collapse collapse">
to
<div id="collapse2" class="panel-collapse collapse">
then
<div id="collapse3" class="panel-collapse collapse">
and so on until each item is displayed from the collection.
Thanks
Use each_with_index do |element, index| do ....
This was you have access to the element index and can use it as any rails variable.
<% #tasks.each_with_index do |task, index| %>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1"><%= task.title %><p style="text-align:right;"><span class="glyphicon glyphicon-chevron-down"></span></p></a>
<p class="taskdescription"><%= task.description %></p>
</h4>
</div>
<div id="collapse<%= index +1 %>" class="panel-collapse collapse">
<ul class="list-group">
<% task.subtasks.each do |subtask| %>
<li class="list-group-item"><%= subtask.title %></li>
<% end %>
</ul>
</div>
</div>
</div>
<% end %>
you can loop with each.with_index(1) and use the counter variable i to dynamically append the counter on the generated html.
<% #tasks.each.with_index(1) do |task, i| %>
<div class="panel-group">
<div class="panel panel-default">
...
<div id="collapse#{i}" class="panel-collapse collapse">
...
</div>
</div>
</div>
<% end %>
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' %>
so I'm trying to show some blog-type data on one of my pages. It works fine, but is posting the posts all at the end of the div as well.
Like this:
Image
<div class="style-2 mb-20 shadow bordered light-gray-bg news-margin col-md-5">
<!-- page-title start -->
<!-- ================ -->
<h1 class="page-title">Latest News</h1>
<div class="separator-2"></div>
<!-- page-title end -->
<p class="lead">The latest news will be posted here:</p>
<div class="row grid-space-12">
<%=# news.each do |news| %>
<div class="col-sm-12">
<div class="image-box style-2 mb-20 shadow bordered text-center">
<div class="overlay-container">
<i class="fa fa-newspaper-o fa-5x p-20"></i>
<div class="overlay-to-top">
<p class="small margin-clear"><em> <%= news.topic %> <br> <%= news.created_at.strftime("%A, %b %d") %></em>
</p>
</div>
</div>
<div class="body">
<h3><%= news.header %></h3>
<div class="separator"></div>
<p>
<%=n ews.content %>
</p>
Read More<i class="fa fa-arrow-right pl-10"></i>
</div>
</div>
</div>
<% end %>
</div>
</div>
Figured it out, I had the = in with <%= news.each do |news| %>, which was printing that info out...