Pager is not responsive and will overflow if table width is too small -- make pager maxSize customizable

[YeomansIII]

[* ] feature request

Current behavior If the table is too small (on mobile devices, this is the case) and five pages are listed in the pager, the pager will overflow to a new line.

Expected behavior The pager should adjust the maxSize if there is not enough space.

Reproduction of the problem Decrease your browser width or test on a mobile device.

What is the motivation / use case for changing the behavior? Responsive design.

• Table version: ^1.3.1

• Angular version: ^2.1.2

• Browser: all

• Language: Typescript 2

Easiest solution I can think of is allowing the maxSize to be passed in as an input, I could implement this myself and make a pull request. Have there been any other thoughts on adding responsive functionality?

[fenta23]

Have the same problem, i think you don't need the numbers in the pagination on mobil devices. I will hide them. What do you think? Did you see, i added the smooth scrolling on the table, so it feels more natural on iDevices...

Other question: do have the problem with the row width on mobil? i have 3 columns in flex mode and i get some space after the last column, and a scrollbar at the bottom:-(

[duard]

I have the same problem, how to fix it ?

[duard]

How can I fix this problem ?

[arlowhite]

Here's the SCSS I have to override this:

// fix pager so that it doesn't wrap and uses available space
.ngx-datatable {
  .datatable-footer-inner {
    display: flex;
    flex-flow: row nowrap;  // can't wrap because footer height fixed
    justify-content: space-between;  // probably not needed because .page-count flex grows
    > .page-count {
      // remove padding so there's more room in-between
      padding-right: 0 !important;
    }
    > .datatable-pager {
      margin: 0 !important;
      // don't grow, otherwise pager won't be right-aligned
      flex: 0 0 auto !important;
      > .pager {
        // prevent numbers from wrapping
        display: flex !important;
        flex-flow: row nowrap;
      }
    }
  }
}

The other advantage of this is that the pager grows to the left instead of changing the width of the table. With this CSS, the left text will be covered by the pager when too narrow. Not sure what the best solution is. At the moment, wrapping the count and pager won't work.

[Ilkhom-S]

Here's the SCSS I have to override this:

// fix pager so that it doesn't wrap and uses available space
.ngx-datatable {
  .datatable-footer-inner {
    display: flex;
    flex-flow: row nowrap;  // can't wrap because footer height fixed
    justify-content: space-between;  // probably not needed because .page-count flex grows
    > .page-count {
      // remove padding so there's more room in-between
      padding-right: 0 !important;
    }
    > .datatable-pager {
      margin: 0 !important;
      // don't grow, otherwise pager won't be right-aligned
      flex: 0 0 auto !important;
      > .pager {
        // prevent numbers from wrapping
        display: flex !important;
        flex-flow: row nowrap;
      }
    }
  }
}

The other advantage of this is that the pager grows to the left instead of changing the width of the table. With this CSS, the left text will be covered by the pager when too narrow. Not sure what the best solution is. At the moment, wrapping the count and pager won't work.

I think, total row count should be on first line, and 2 line with center should be pager. In that way pager fits mobile size and no need to scroll

[grsubin]

.ngx-datatable .datatable-footer .datatable-pager { white-space: nowrap; } This should prevent wrapping.