I'm using will paginate on my ruby on rails app..I've used this before on other apps and it was working fine however when i used it on this one for some reason it looks like the tabs for the pagination are reversed.
Here's the html
<div class="container">
<br />
<br />
<h2 class="black">
Recent News
<div class="line_section"><div>
</h2>
<div class="row">
<div class="span12">
<ul class="recent-news">
<% #news_all.each do |news| %>
<li style="font-size: 16px; line-height: 19px; letter-spacing: 1px; font-size: 14px; color: #555; text-align: left;">
<%= image_tag news.photo.url, class: 'pull-left', style: 'margin-right:40px; margin-top: 2px; width: 300px;' %>
<div style=" width: 600px; float: right;">
<%= link_to news.title, news %>
<br />
<%= link_to news.date, news, style: 'font-size: 10px; color: black; position: relative; top: 15px;' %>
<br /><br />
<%= truncate news.content, length: 500 %>
<br />
<%= link_to 'Read More...', news, style: 'font-size: 12px !important;' %>
</div>
</li>
<% end %>
<%= will_paginate #news_all %>
</div><!-- end span12 -->
</div><!-- end row -->
</div><!-- end container -->
here's the controller
def batnews
#article = Article.first
#news_all = News.all
#news_all = News.paginate(page: params[:page]).limit(4)
#comments = Comment.all
end
here's the link to the site so you can see what's actually going on.
http://www.batman-fansite.com/batnews
if you scroll to the way bottom you will see the pagination.
Fix you css:
.recent-news li {
float: right;
}
add something like
.recent-news .pagination li {
float: left;
}
There are two problems here:
Display order is incorrect due to CSS float:right, causing elements to go right in order rendered, which results in backwards order left-to-right.
Using limit(4) on paginated set vs. per_page: 4 option in pagination.
Check your CSS, you'll find:
.recent-news li {
float: right;
}
...and your controller code should be:
#news_all = News.paginate(page: params[:page], per_page: 4)
Try something like this:
def index
#posts = Post.paginate :page => params[:page], **:order => "created_at ASC"**
end
Related
I am making a simple search in rails on the index page. My problem is that on debug I get the correct results but they don't show on the frontend.
def index
if !params[:category].present? and !params[:title].present?
#services = Service.take(4)
else
if params[:category] != "Find Service" and params[:title].present?
#services = Service.where(category: params[:category], title: params[:title]).take(4)
elsif params[:category] == "Find Service" and params[:title].present?
#services = Service.where(title: params[:title]).take(4)
elsif params[:category] != "Find Service" and !params[:title].present?
#services = Service.where(category: params[:category]).take(4)
else
#services = Service.take(4)
end
end
end
My view index.html.erb
<%= form_with(url: "services", method: "get") do |form| %>
<div class="banner-input" style="margin-top">
<div class="listing-sort listing-sort--main-listing" style="width: 50%;float: left; border-radius: 6px; border: 2px solid white; background: transparent; padding: 0px;">
<input type="submit" value="" class="main-listing__form-field agent-submit" style="width: 10% ;float:right">
<%= form.text_field "title", id: "search_agent", class: "main-listing__form-field ", placeholder: "Search by Name or Location...", style: "width: 75% ;float:right; background: transparent; color: white!;" %>
<div class="listing-sort__inner" style="float:left;margin: 0px; width: 25%; padding: 0px;">
<p class="listing-sort__sort">
<%= form.select("category",options_for_select(["Find Service", "Assembly", "Carpet Cleaning", "Electrical", "House Cleaning", "HVAC", "Handyman", "IT", "Junk Removal", "Lawn Care","Moving", "Painting", "Plumbing", "Staging", "Photography", "Videography", "Inspectors"], :selected => "Find Service"), {include_blank: false}, { :class => 'ht-field listing-sort__field' }) %>
</p><!-- .listing-sort__sort -->
</div><!-- .listing-sort__inner -->
</div><!-- .listing-sort -->
</div>
<% end %>
<section style="margin-top: 50px">
<h2 style="margin-left: 15px; padding-bottom: 30px; font-size: 24px;">Recently viewed & more</h2>
<% #services.each do |service| %>
<%= render 'services/service_card', :f => service %>
<% end %>
</section>
<section class="jumbotron"style="margin-top: 50px">
<h2 style="margin-left: 15px; padding-bottom: 30px; font-size: 24px;">Pro SEM services
</h2>
<% #services.each do |service| %>
<%= render 'services/service_card', :f => service %>
<% end %>
</section>
This is _service_card
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3" style="padding-bottom: 10px">
<div class="boxes">
<div class="box-img">
<img src="assets/MobileApps.png">
</div>
<div class="user-detail-main">
<div class="user-detail-img">
<img src="assets/MobileApps.png">
</div>
<div class="user-detail">
<a><h3><%= f.user.profile.first.first_name %></h3></a>
<p>Level 1 Seller</p>
</div>
<div class="user-detail-para">
<% byebug %>
<p><%= f.description %></p>
</div>
<div style="padding-top: 50px;">
<i class="fas fa-star" style="color: #ffbf00"></i> (5)
</div>
</div>
<div class="user-detail-footer">
<div class="heart-icon">
<i class="fas fa-heart" style="color: #c6c6c6"></i>
<i class="fas fa-bars" style="color: #c6c6c6"></i>
</div>
<div class="user-value">
<p>Starting At $ <%= f.packages.first.price%></p>
</div>
</div>
</div>
Please help me regarding this. Looking forward. It is working fine without search, but with search it doesn't update the results and show same results.
I am applying the Bootstrap 4 album template to a Ruby on Rails website I am developing. The original album template looks like this:
But mine is not displaying like that. It's displaying as a list, one beneath the other, similar to what a blog page would look like.
I believe the file where I need to make the necessary changes is here in app/views/products/index.hmtl.erb:
<div class="album text-muted">
<div class="container">
<div class="row">
<div class="card">
<%= render #products %>
<% #products.each do |product| %>
<%= product.image %>
<% end %>
<p class="card-text">
<% #products.each do |product| %>
<%= product.description %>
<% end %>
</p>
</div>
</div>
</div>
</div>
<%= paginate #products %>
<%= link_to 'New Product', new_product_path if logged_in?(:site_admin) %>
I am not missing any of the Bootstrap classes from the original template, so I am wondering if its my code that is causing it not to render appropriately.
Here is the stylesheets/products.scss file:
// Place all the styles related to the products controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
// Custom bootstrap variables must be set or imported *before* bootstrap.
#import "bootstrap";
#import "font-awesome";
body {
min-height: 75rem; /* Can be removed; just added for demo purposes */
}
.navbar {
margin-bottom: 0;
}
.jumbotron {
padding-top: 6rem;
padding-bottom: 6rem;
margin-bottom: 0;
background-color: #fff;
}
.jumbotron p:last-child {
margin-bottom: 0;
}
.jumbotron-heading {
font-weight: 300;
}
.jumbotron .container {
max-width: 40rem;
}
.album {
min-height: 50rem; /* Can be removed; just added for demo purposes */
padding-top: 3rem;
padding-bottom: 3rem;
background-color: #f7f7f7;
}
.card {
float: left;
width: 33.333%;
padding: .75rem;
margin-bottom: 2rem;
border: 0;
}
.card > img {
margin-bottom: .75rem;
}
.card-text {
font-size: 85%;
}
footer {
padding-top: 3rem;
padding-bottom: 3rem;
}
footer p {
margin-bottom: .25rem;
}
/*
* Custom styles
*/
.social-links li a {
font-size: 1.5em;
}
try this code for your index.html.erb:
<div class="album text-muted">
<div class="container">
<div class="row">
<% #products.each do |product| %>
<div class="card">
<%= image_tag("picture_holder")%>
<strong class="card-text"><%= product.summary %></strong>
<a href="<%= product_path(product) %>"><%= image_tag("picture_holder")%><a>
<p class="card-text"><%= product.price %></p>
<p class="card-text"><%= product.description %></p>
</div>
<% end %>
</div>
<div class="row">
<div class="col-md-12">
<%= paginate #products %>
</div>
</div>
</div>
</div>
it should work.
I'd like for you to try to output the image and the description in the same iteration.
<% #products.each do |product| %>
<div class="card">
<%= product.image %>
<p class="card-text">
<%= product.description %>
</p>
</div>
<% end %>
Note that here I can see they are displaying their images like so
<img data-src="holder.js/100px280/thumb"
alt="100%x280" style="height: 280px; width: 100%;
display: block;" src="some/path/" data-holder-rendered="true">
Notice the inline styles that are being applied here. Also, I'm not sure if product.image is a path to an image or an actual binary image. if it's the former you'll need to put it into the src= attribute of an img tag similar to the one bootstrap uses in their example.
<img scr='<%= product.image %>' />
I created a loop to show all blog posts. I am getting an error that displays random text after the loop:
It looks like there's a stack of texts with all the post information listed at the end of the loop, I have no idea how it happened and how to fix it.
I checked my HTML and CSS, but couldn't figure out what caused the issue.
Below is the HTML and CSS code:
<section id="posts" class="wrapper">
<h2>My Latest Articles</h2>
<hr>
<div class="post_container">
<%= #posts.each do |p| %>
<div class="article">
<h3 class="post_title"><%= link_to p.title, p %></h3>
<p class="post_date"><%= p.created_at.strftime("%A,%b %d") %></p>
<p class="content"><%= truncate(p.content, length: 400) %></p>
</div>
<% end %>
</div>
<div class="button_wrapper">
More Articles
</div>
</section>
CSS
#posts {
padding: 6.5em 0 10em 0;
h2 {
text-align: center;
color: $text;
margin-bottom: 1.25rem;
}
.post_container {
padding: 6em 0 6em 0;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
.article {
max-width: 28%;
}
.post_title {
color: $text;
font-size: 1.6em;
}
.post_date {
padding: .75rem 0;
color: $accent;
font-size: 1.2em;
}
.content {
color: $grey;
}
}
}
<%= #posts.each do |p| %>
Should be
<% #posts.each do |p| %>
Do not output the result of .each.
Its because your using <%= at the beginning of your loop. You would use <% instead
Change the post_container div to this:
<div class="post_container">
<% #posts.each do |p| %>
<div class="article">
<h3 class="post_title"><%= link_to p.title, p %></h3>
<p class="post_date"><%= p.created_at.strftime("%A,%b %d") %></p>
<p class="content"><%= truncate(p.content, length: 400) %></p>
</div>
<% end %>
</div>
Use
<% #posts.each do |p| %>
because <= %> use for print the value in your case it'll print the whole loop
I have been working with Michael Hartl's tutorial and I am almost finished. However, I got near the end and am have a problem styling the micropost section of the "user/show/" page. I would like all the microposts to be under one another. Currently they are showing like this:
custom.css.scss
.microposts {
list-style: none;
padding: 0;
li {
padding: 10px 0;
border-top: 1px solid #e8e8e8;
}
.user {
margin-top: 5em;
padding-top: 0;
}
.content {
display: block;
margin-left: 60px;
img {
display: block;
padding: 5px 0;
}
}
.timestamp {
color: $gray-light;
display: block;
margin-left: 60px;
}
.gravatar {
float: left;
margin-right: 10px;
margin-top: 5px;
}
}
aside {
textarea {
height: 100px;
margin-bottom: 5px;
}
}
span.picture {
margin-top: 10px;
input {
border: 0;
}
}
microposts.html.erb
<li id="micropost-<%= micropost.id %>">
<%= link_to gravatar_for(micropost.user), micropost.user %>
<span class="user"><%= link_to micropost.user.name, micropost.user %></span>
<span class="content"><%= micropost.content %></span>
<span class="timestamp">
Posted <%= time_ago_in_words(micropost.created_at) %> ago.
</span>
</li>
show.html.erb
<% provide(:title, #user.name) %>
<div class="row">
<aside class="col-md-4">
<section class="user_info">
<h1>
<%= gravatar_for #user %>
<%= #user.name %>
</h1>
</section>
</aside>
<div class="col-md-8">
<% if #user.microposts.any? %>
<h3>Microposts (<%= #user.microposts.count %>)</h3>
<ol class="microposts">
<%= render #microposts %>
</ol>
<%= will_paginate #microposts %>
<% end %>
</div>
</div>
If someone could please help me, it would be highly appreciated. Thank you in advance!
You need to clear the floats. Try adding clear: both; to your .microposts .li SASS
.microposts {
list-style: none;
padding: 0;
li {
padding: 10px 0;
border-top: 1px solid #e8e8e8;
clear: both;
}
JSFIDDLE DEMO
Rails 3.0.3 does not seems to accept <%= f.text_area :message, :class => "share_ta" %> as a valid statement, and says ActionView::Template::Error (undefined method 'message' for []:Array):
Does anyone know why?
--Edit--
This is the form_for
<%= form_for :activity, :url => post_activity_path do |f| %>
<div class="share_tb">
<div class=share_t><span style="margin-left: 10px;">Tell us what's new <span style="color: #1fc2d1;"><%= #user.name %></span></span></div>
<%= f.text_area :message, :class => "share_ta" %>
</div>
<div id=sm_share class=sm_share_rc>
<ul>
<li style="color: #6b6b6b; font-size: 10pt; display: inline; list-style-type: none; float: right; margin-right: 10px; margin-top: 5px;"><%= f.check_box :everyone, "0", :class => "styled" %>Everyone</li>
<li style="color: #6b6b6b; font-size: 9pt; display: inline; list-style-type: none; height: 3px; float: left; margin-top: 5px;"><input type="checkbox" name="friends_only" value="3" class="styled">My Friends<br></li>
</ul>
<%= f.submit "Share", :class => "sm_share_b" %>
</div>
</div>
<% end %>
#Amit,
How have you specified form_for?
EDIT: 2nd time with more information from original poster.
It should be
<%= form_for :activity, :url => acti_path do |f| %>
<%= f.text_area :message, :class => "share_ta" %>
<% end %>