i have been experimenting with rails 6 and I'm stuck regarding a certain bootstrap grid placement. i want to create something in the lines of a photo blog. meaning people can upload photos or text and it should get displayed in a grid system filling 4 columns and then moving down from left to right till eventually reach like 5 rows and then code in pagination (but that's for another time) .
So far ive made a grid and can display anything uploaded to the databse but my code fills only the first row and not moving from left to right. any suggestions?
<tbody>
<% #ads.each do |ad| %>
<tr>
<td><%= ad.title %></td>
<td><%= ad.description %></td>
<td><%= ad.area %></td>
<td><%= ad.contact %></td>
</tr>
<% end %>
</tbody>
</table>
<br>
<%= link_to 'New Ad', new_ad_path %>
<div class="container">
<% #ads.each do |ad| %>
<div class="row mt-3">
<div class="col-sm">
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title"> <%= ad.title %> </h5>
<p class="card-text"><%= ad.description %></p>
<p class="card-text"><%= ad.area %></p>
<%= ad.contact %>
</div>
</div>
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
<% end %>
</div>
You can use Enumerable#each_slice in the following way.
This example is pure ruby, but you can easily transpose to rails view with proper erb and html markups:
ads = (11..24) # emulates your collection
items_per_row = 5
ads.each_slice(items_per_row) do |row_items|
# start a row: <div class="row mt-3">
row_items.each do |item|
# start a columnn: <div class="col-sm">
print "| #{item}" # only for this demo, add your item with markup here
# close the column: </ div>
end
# close the row: </ div>
puts # only for this demo, remove in erb
end
The above code as pure Ruby returns:
# | 11| 12| 13| 14| 15
# | 16| 17| 18| 19| 20
# | 21| 22| 23| 24
Related
I have the following bit of code, I am trying to insert my ruby code into the select to create the standard drop-down selection. The code works however the styling it really shit.
<%= form.label :housing_size %>
<div class="field form-control form-group form-select pb-1">
<%= form.select :housing_size_id, options_from_collection_for_select(Housingsize.order(:value).all, "id", "value", current_user.id) %>
</div>
<p class=" open-text pt-1"> Please select a housing size </p>
image of styling issue i have
I got this Rails blogs app and for the indexpage where the articles are posted it shows a short version of the article.
<%= render 'layouts/header' %>
<%= render 'layouts/topbar' %>
<div class="contentnews">
<%= render 'layouts/bannerad' %>
<div class="row">
<% if current_user.try(:admin?) %>
<%= link_to 'Nieuws toevoegen', new_article_path, :class => "button ala" %>
<% end %>
</div>
<div class="row">
<%= render 'overview' %>
</div>
</div>
The overview-partial :
<div class="articlebox ">
<div class="large-4 columns">
<% #articles.reverse_each do |article| %>
<div class="articlebox2">
<div class="articleindex">
<%= link_to article.title, article %>
</div>
<div class="articlebody">
<%= article.short.to_s.html_safe %>
</div>
</div>
<% end %>
</div>
</div>
The problem is that this way all the articles end up in one row. I want it to show the short articles inline on the page and after every two or three article it has to start in a new row with again two or three short articles.
Anybody got any idea?
You don't actually need to create a row every n-elements. With foundation just wrap all the elements in a row, and give them columns class:
<div class="articlebox">
<div class="large-4 columns">
<div class="row"> <!-- Wrap in a row -->
<% #articles.reverse_each do |article| %>
<div class="articlebox2 large-6 columns"> <!-- Give a column and width class here -->
...
</div>
<% end %>
</div>
So you can nesting grids with foundation, and creating new rows is not necessary, foundation will just wrap if the elements exceeds the grid.
If you actually really want to create rows, you can have a look at the method each_with_index API and then insert row elements if index % 2 == 0. But this is unnecessary complexity.
I want to display data inside text field and those values will be fetched dynamically.But i am not getting any value(only blank filed is coming) when show action is executing.
Please check mu code given below.
Views/posts/show.html.erb
<p id="notice"><%= notice %></p>
<p>
<b>Name:</b>
<input type="text",value="<%= #post.name %>">
</p>
<p>
<b>Title:</b>
<input type="text",value="<%= #post.title %>">
</p>
<p>
<b>Content:</b>
<input type="text",value="<%= #post.content %>">
</p>
<%= link_to 'Edit', edit_post_path(#post) %> |
<%= link_to 'Back', posts_path %>
Please help me to resolve this issue.
Replace the value Property by removing quotes as:
<input type="text",value=<%= #post.content %>>
Not able to show jQuery mobile check box with values like aa''a#a.com
#contact_info = [{:source_id=>40021, :object=>"148302514605161.2", :account_number=>"332950", :contact_type=>"E", :contact_value=>"aa''a#a.com", :sequence=>"1"}, {:source_id=>40021, :object=>"148302514605162.2", :account_number=>"332950", :contact_type=>"E", :contact_value=>"asdf#asd.org", :sequence=>"2"}, {:source_id=>40021, :object=>"148302514605163.2", :account_number=>"332950", :contact_type=>"E", :contact_value=>"dog#g.com", :sequence=>"3"}, {:source_id=>40021, :object=>"148302514605164.2", :account_number=>"332950", :contact_type=>"E", :contact_value=>"gh'g#ff.bn", :sequence=>"4"}, {:source_id=>40021, :object=>"148302514605165.2", :account_number=>"332950", :contact_type=>"F", :contact_value=>"2579525795", :sequence=>"5"}]
In .erb file
<table id="previous_email_fax_list">
<% if #contact_info. size > 0 %>
<% #contact_info.each do |contact|%>
<tr>
<td style="border:1px solid black;">
<div class="email_fax_check">
<input type="checkbox" name="<%= contact.contact_value %>" id="<%= contact.contact_value %>" class="custom" />
<label for="<%= contact.contact_value %>"><br/></label>
</div>
<div class="email_fax_label">
<% if contact.contact_type == "E" %>
<%= contact.contact_value %>
<% elsif contact.contact_type == "F" %>
<%= number_to_fax(contact.contact_value) %>
<% end %>
</div>
</td>
</tr>
<% end %>
<% else %>
<tr>
<td align='center'>
No email addresses or fax numbers found for this account
</td>
</tr>
<% end %>
</table>
I am getting Error: Syntax error, unrecognized expression: for='gh'g#ff.bn']
I copied this code:
<input type="checkbox" name="<%= contact.contact_value %>" id="<%= contact.contact_value %>" class="custom" />
<label for="<%= contact.contact_value %>"><br/></label>
and added it to an existing app view, adding a variable, removing contact. and removing all of the double quotes to make a test:
<% contact_value = "'gh'g#ff.bn'" %>
<input type="checkbox" name=<%= contact_value %> id=<%= contact_value %> class="custom" />
<label for=<%= contact_value %>><br/><%= contact_value %></label>
I get:
without any errors. Give it a try without any quotes around the <%= contact.contact_value %> in the view code.
Am using kaminari ajax pagination in my project. It is working fine, But contents are displaying number of pages times in the page. For example if number of items per pages is 7, then it is displaying 7 times the same content. What am doing is
In product_details controller
def index
#products=ProductDetail.where("department_id = ? and category_id = ?",1, 1).page(params[:page]).per(15)
end
In product_details/index.html.erb
<div id="product_details">
<%= render #products %>
</div>
<div id="paginator">
<%= paginate #products, :remote=>true %>
</div>
In product_details/index.js.erb
$('#product_details').html('<%= escape_javascript render (#products) %>');
$('#paginator').html('<%= escape_javascript(paginate(#products, :remote=>true).to_s)%>');
In product_details/_product_detail.html.erb
<div id="product_list">
<% #products.each do | product | %>
<div class="product_container">
<div class="product_box" >
<div id="future_image_container">
<div class="image_block" >
<%= image_tag(product.image_path, :alt => "product image", :height=>"215px") %>
</div>
<span id="future_price" style="text-decoration: line-through; color: #9e9c9c;">
<span style="color: black;">
<%= "$#{product.price}" %>
</span>
</span>
<div id="circle">
<p>
<% if(product.discount > 0) %>
<% new_price=((2.0*((product.price*product.discount)/100)).round)/2.0 %>
<% else %>
<% new_price=product.price %>
<% end %>
<%= "$#{new_price}"%>
</p>
</div>
</div>
<p class="future_product_name">
<%= product.name %>
</p>
<% #brands=Brand.where("id=?",product.brand_id)
#brands.each do |brand|
#brandname=brand.name
end
%>
<p class="future_product_name">
<%= "Brand : #{#brandname}" %>
</p>
</div>
</div>
<% end %>
</div>
Please help me to solve this problem
I noticed that when i use <%= render #products %> how many items i have taken per page that number of times it repeates. Therefore I solved this by the following code:
In product_details controller
def index
#products=ProductDetail.where("department_id = ? and category_id = ?",1, 1).page(params[:page]).per(15)
end
In product_details/home.html.erb
<div id="product_details">
<%= render 'index' %>
</div>
In product_details/index.js.erb
$('#product_details').html('<%= escape_javascript render ('index') %>');
In product_details/_index.html.erb
<div id="product_list">
<%= paginate #products, :remote=>true %>
<% #products.each do | product | %>
<div class="product_container">
<div class="product_box" >
<div id="future_image_container">
<div class="image_block" >
<%= image_tag(product.image_path, :alt => "product image", :height=>"215px") %>
</div>
<span id="future_price" style="text-decoration: line-through; color: #9e9c9c;">
<span style="color: black;">
<%= "$#{product.price}" %>
</span>
</span>
<div id="circle">
<p>
<% if(product.discount > 0) %>
<% new_price=((2.0*((product.price*product.discount)/100)).round)/2.0 %>
<% else %>
<% new_price=product.price %>
<% end %>
<%= "$#{new_price}"%>
</p>
</div>
</div>
<p class="future_product_name">
<%= product.name %>
</p>
<% #brands=Brand.where("id=?",product.brand_id)
#brands.each do |brand|
#brandname=brand.name
end
%>
<p class="future_product_name">
<%= "Brand : #{#brandname}" %>
</p>
</div>
</div>
<% end %>
</div>
Now no product repeates and ajax pagination is also working fine