Kaminari pagination layout is broken

Question

I have a trouble with kaminari pagination and bootstrap styles. Pagination works fine, but styles are broken. Is there any way to fix it? or is there any other style sheets for kaminari pagination?

here is a screenshot http://imageshack.us/photo/my-images/59/kaminari.png/

Browser Google Chrome

= paginate @activities, :theme => 'twitter-bootstrap'

I also tryed to use this gem 'bootstrap-kaminari-views' = paginate @activities, :theme => 'twitter-bootstrap' — azaytc, Sep 05 '12 at 13:53
sorry for the previous link. use https://github.com/mcasimir/kaminari-bootstrap. i have used same and it works with bootstrap — Prasad Surase, Sep 05 '12 at 14:03
all i need is to add gem 'kaminari-bootstrap' to gemfile? if yes, i get undefined local variable or method `num_pages' for # — azaytc, Sep 05 '12 at 14:21
add the gem 'kaminari-boostrap' and run 'bundle install'. i hope u have installed the kaminari gem as they have specified. check the class of ur object collection. if it is Array, use "Kaminari.paginate_array(my_array_object).page(params[:page]).per(10)" else if ActiveRecord::Relation, use "@users = User.order(:name).page params[:page]" — Prasad Surase, Sep 05 '12 at 14:32

score 3 · Answer 1 · answered Jan 05 '13 at 00:36

3

You can also run

rails g kaminari:views bootstrap

answered Jan 05 '13 at 00:36

Ryan Mohr

811
8
10

worked for me, though I had to run `rails g kaminari:views bootstrap2` – Lev Denisov Aug 26 '16 at 12:07

score 1 · Answer 2 · answered Sep 05 '12 at 13:16

1

checkout https://github.com/gabetax/twitter-bootstrap-kaminari-views

answered Sep 05 '12 at 13:16

Prasad Surase

6,486
6
39
58

Thanks. That helped, but doesnt resolved isuue. Pagination become better but its still not perfect – azaytc Sep 05 '12 at 13:32

score 1 · Accepted Answer · answered Sep 28 '12 at 05:19

1

This might be due to missing i18n translations -- they create extra tags which messes up bootstrap pagination.

answered Sep 28 '12 at 05:19

glebtv

3,739
1
22
10

1

How to add missing i18n translations ? – ejo Apr 15 '16 at 06:53

SteveO7 · Answer 4 · 2012-09-07T21:36:07.220

I've had the same problem and after some experimentation I ended up with this in my gem file;

gem "kaminari", "~> 0.13.0"
gem "kaminari-bootstrap", "~> 0.1.2"

The page links are working the way I think they are supposed to, although I dont like the way they look.
I get an error message if I use Kaminari 0.14.0, so back it off to 0.13.0.

Also... I noticed it messes things up if I generate Kaminari views. It is the most stable to use the views that come with the gem, if you can live with them.

score 0 · Answer 5 · edited Jun 11 '14 at 02:26

If you're using Bootstrap 3 you'll need to do the following. In the console:

rails g kaminari:views bootstrap

Then, replace the contents of app/views/kaminari/_pagination.html.erb with the following:

<%= paginator.render do %>
    <ul class="pagination">
        <%= first_page_tag unless current_page.first? %>
        <%= prev_page_tag unless current_page.first? %>
        <% each_page do |page| -%>
            <% if page.left_outer? || page.right_outer? || page.inside_window? %>
                <%= page_tag page %>
            <% elsif !page.was_truncated? %>
                <%= gap_tag %>
            <% end %>
        <% end %>
        <%= next_page_tag unless current_page.last? %>
        <%= last_page_tag unless current_page.last? %>
    </ul>
<% end %>

Replace app/views/_first_page.html.erb with the following (note the change to the class of li and from link_to_unless to link_to):

<li <%= "class=disabled" if current_page.first? %>>
    <%= link_to raw(t 'views.pagination.first'), url, :remote => remote %>
</li>

Also replace the contents of _prev_page, _last_page, and _next_page in a similar fashion (you'll just need to change "current_page.first?" to "current_page.last?"

Kaminari pagination layout is broken

5 Answers5