CODEWITHSUNDEEP
ruby-on-railstwitter-bootstrapbootstrap-4will-paginate
Ayaz Ujjan
Ayaz Ujjan

Reputation: 41

Pagination does not work properly - will_paginate, bootstrap4

I am new on Rails. Trying to add will_paginate in my project, followed the instructions and added the configurations accordingly. Finally it works and shows the page numbers.

1.) The problem is that when it shows the pages number and next page option it does not include the space between numbers.

enter image description here

enter image description here

2.) is there any way to use will_paginate bootstrap with bootstrap 4? bkz as i know the guy mentioned he dont provide support for that gem anymore.

Upvotes: 3

Views: 3921

Answers (3)

widjajayd
widjajayd

Reputation: 6253

since you can see the number it seems your bootstrap 4 is working already you just need to make CSS styles to make those pagination links prettier, here is source css for will_paginate

to customize how it views below is sample or will_paginate scss file you can create one scss file inside app/stylesheets/will_paginate.scss and put the code below

.digg_pagination {
  background: #FFFFFF; 
  font-size: 1.2em;
  cursor: default;
  /* self-clearing method: */ }
  .digg_pagination a, .digg_pagination span, .digg_pagination em {
    padding: 0.2em 0.5em;
    display: block;
    float: left;
    margin-right: 1px; }
  .digg_pagination .disabled {
    color: #999999;
    border: 1px solid #dddddd; }
  .digg_pagination .current {
    font-style: normal;
    font-weight: bold;
    background: #2e6ab1;
    color: white;
    border: 1px solid #2e6ab1; }
  .digg_pagination a {
    text-decoration: none;
    color: #105cb6;
    border: 1px solid #9aafe5; }
    .digg_pagination a:hover, .digg_pagination a:focus {
      color: #000033;
      border-color: #000033; }
  .digg_pagination .page_info {
    background: #2e6ab1;
    color: white;
    padding: 0.4em 0.6em;
    width: 22em;
    margin-bottom: 0.3em;
    text-align: center; }
    .digg_pagination .page_info b {
      color: #000033;
      background: #6aa6ed;
      padding: 0.1em 0.25em; }
  .digg_pagination:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden; }
  * html .digg_pagination {
    height: 1%; }
  *:first-child + html .digg_pagination {
    overflow: hidden; 
}

Upvotes: 0

Clemens Kofler
Clemens Kofler

Reputation: 1968

The issue you're encountering has absolutely nothing to do with Ruby/Rails: It's merely a CSS issue. will_paginate makes no assumptions about the styling of your pagination section and simply outputs unstyled HTML tags. It's then your responsibility to style it according to your liking – e.g. with Bootstrap, like you've mentioned.

And generally, I suggest using Kaminari instead of will_paginate: I think it makes more sense for a pagination solution to use regular templates instead of rendering all the HTML using helper methods. But that's just my opinion after using will_paginate for more than a decade and Kaminari almost since it came out 6 1/2 years ago.

Upvotes: 1

Md. Farhan Memon
Md. Farhan Memon

Reputation: 6121

is there any way to use will_paginate bootstrap with bootstrap 4? bkz as i know the guy mentioned he dont provide support for that gem anymore.

Here is the will_paginate support with bootstrap 4 will_paginate-bootstrap4

Upvotes: 4

Related Questions