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...
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>
This is my code:
<div class="column">
<div class="post-module">
<a href="https://www.livescience.com/59802-should-we-fear-
intelligent-robots.html" >
<div class="thumbnail">
<div class="date">
<div class="day">14</div>
<div class="month">Jul</div>
</div>
<img src="#"/>
</div>
<div class="post-content">
<div class="category">Robots</div>
<h1 class="title">Should We Fear The Rise of Intelligent
Robots? </h1>
<h2 class="sub_title"> Robots will unite. </h2>
<p class="description"></p>
</div>
</a>
</div>
</div>
I want to make that code in rails but I am just a beginner in rails and I wasn't able to find something that could help me in this. I only know the basic idea of the link_to in rails.
link_to method can take a block and display it's evaluation as a link content:
<%= link_to "https://www.livescience.com/59802-should-we-fear-intelligent-
robots.html" do %>
<div class="thumbnail">
<div class="date">
<div class="day">14</div>
<div class="month">Jul</div>
</div><img src="#"/>
</div>
<div class="post-content">
<div class="category">Robots</div>
<h1 class="title">Should We Fear The Rise of
Intelligent Robots? </h1>
<h2 class="sub_title"> Robots will unite. </h2>
<p class="description"></p>
</div>
<% end %>
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.
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.