Home » Bootstrap » pagination » Simple » Twitter » Simple fix for pagination with Twitter Bootstrap

Wednesday, October 29, 2014

Simple fix for pagination with Twitter Bootstrap

Advertise

As a Rails guy, I always perform my table pagination using mislav’s will_paginate gem. However, when I use it combined with Twitter Bootstrap, I get an undesired result:

There is a very simple fix for this which doesn’t require using an additional gem.

Add the following CSS to your application:

assets/stylesheets/pagination_fix.css 123456789101112131415161718192021 //------------------------------------------------------------------------------- // Pagination fix for will_paginate and bootstrap //------------------------------------------------------------------------------- .pagination { span.disabled { color: #aaa !important; } em.current { float: left; padding: 0 14px; line-height: 38px; text-decoration: none; background-color: white; border: 1px solid #DDD; border-left-width: 0; } .previous_page { border-left: 1px solid #ddd; } }

Refresh your page and the pagination issues should be resolved:

Hope this helps!

I recently attempted to use the will_paginate gem with the latest version of Bootstrap (v2.2.1) and the pagination no longer rendered using the

  • ..
    • elements. To fix this I added the following into an initializer:

    config/initializers/will_paginate.rb 123456789101112131415161718192021222324252627282930if defined?(WillPaginate) module WillPaginate module ActionView def will_paginate(collection = nil, options = {}) options[:renderer] ||= BootstrapLinkRenderer super.try :html_safe end class BootstrapLinkRenderer < LinkRenderer protected def html_container(html) tag :div, tag(:ul, html), container_attributes end def page_number(page) tag :li, link(page, page, :rel => rel_value(page)), :class => ('active' if page == current_page) end def previous_or_next_page(page, text, classname) tag :li, link(text, page || '#'), :class => [classname[0..3], classname, ('disabled' unless page)].join(' ') end def gap tag :li, link(super, '#'), :class => 'disabled' end end end endend

    This tip was provided by Søren Houen and found on the Railscasts comments.
    Posted by at
    Labels: , , ,
    Share :

    No comments:

    Subscribe to: Post Comments (Atom)