Custom css with kaminari with bootstrap
Solution 1
After I posted this question I found the solution: kaminari: A Scope & Engine based, clean, powerful, customizable and sophisticated paginator for Rails 3.
Just go to the console and type:
rails generate kaminari:views bootstrap4
It will download some Haml files to your application, and the views are changed. It also supports bootstrap 2 and 3 e.g
rails generate kaminari:views bootstrap3
Here are some themes for Kaminari views: https://github.com/amatsuda/kaminari_themes
Solution 2
simply add following css to your application.css
.pagination a, .pagination span.current, .pagination span.gap {
float: left;
padding: 0 14px;
line-height: 38px;
text-decoration: none;
background-color: white;
border: 1px solid #DDD;
border-left-width: 0;
}
.pagination {
border-left: 1px solid #ddd;
.first{
padding : 0;
float: none;
border: none;
}
.prev {
padding : 0;
float: none;
border: none;
}
.page{
padding : 0;
float: none;
border: none;
}
.next{
padding : 0;
float: none;
border: none;
}
.last{
padding : 0;
float: none;
border: none;
}
}
Solution 3
rails generate kaminari:views bootstrap4
Available themes: bootstrap2, bootstrap3, bootstrap4, bourbon, bulma, foundation, foundation5, github, google, materialize, purecss, semantic_ui
Solution 4
Nearly gave up until I found "Pagination with Kaminari".
In short, after rails g kaminari:default
go into the views that are created under app/views/kaminari and change the tags to suit your styling.
I went into _paginator.html.erb
and changed the <nav>
to a <div>
and replaced all the <span>
tags with <li>
.
To get the bootstrap styling that fits my app, I changed the <div>
tag in _paginator.html.erb
to <div class="pagination pull-right">
and the <span class="page">
tags to simple <li>
.
There's are a couple of gotcha's that perhaps someone else can help with:
There's erb in
_page.html.erb
that changes the class for the current page when active. It messes up the alignment so to get around that, change the<%= link_to_unless page.current? ... %>
to<%= link_to page ... %>
.The
_gap.html.erb
view which inserts the "..." block also gets messed up. Replace it with<li><%= link_to '...' %></li>
to get it to sit nicely inline.
I just started coding 8 weeks ago so for sure there are better ways to approach this and ways to clean up 1 and 2, but if you just want things to look right and function as intended, give that a shot and fine tune later.
duykhoa
Senior Technology consultant with 7 years experience working in Software Development. Kevin has worked with various business domains and wide range of technologies, involved Ruby on Rails, Spring boot Java, NodeJS, WebComponents, various types of Database System, Streaming processing platform and Search Engine. Kevin is passionated with Agile Development and Cutting-edge technologies.
Updated on July 09, 2022Comments
-
duykhoa almost 2 years
I try to use paginate with kaminari. My project used bootsrap css, and the result is so ugly:)
The html is generated by nokogiri
<nav class="pagination"> <span class="first"> <a href="/admin/book_borrow/borrow?locale=en">« First</a> </span> <span class="prev"> <a rel="prev" href="/admin/book_borrow/borrow?locale=en">‹ Prev</a> </span> <span class="page"> <a rel="prev" href="/admin/book_borrow/borrow?locale=en">1</a> </span> <span class="page current"> 2 </span> <span class="page"> <a rel="next" href="/admin/book_borrow/borrow?locale=en&page=3">3</a> </span> <span class="page"> <a href="/admin/book_borrow/borrow?locale=en&page=4">4</a> </span> <span class="next"> <a rel="next" href="/admin/book_borrow/borrow?locale=en&page=3">Next ›</a> </span> <span class="last"> <a href="/admin/book_borrow/borrow?locale=en&page=4">Last »</a> </span> </nav>
I want something like pagination in bootstrap page, how I can do? Please help!