Why does ui-grid pagination look so crooked?

Question

This is my current code:

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pagination']);

app.controller('MainCtrl', [
'$scope', '$http', 'uiGridConstants', function($scope, $http, uiGridConstants) {

  var paginationOptions = {
    pageNumber: 1,
    pageSize: 25,
    sort: null
  };

  $scope.gridOptions = {
    paginationPageSizes: [25, 50, 75],
    paginationPageSize: 25,
    useExternalPagination: true,
    useExternalSorting: true,
    columnDefs: [
      { name: 'name' },
      { name: 'gender', enableSorting: false },
      { name: 'company', enableSorting: false }
    ],
    onRegisterApi: function(gridApi) {
      $scope.gridApi = gridApi;
      $scope.gridApi.core.on.sortChanged($scope, function(grid, sortColumns) {
        if (sortColumns.length == 0) {
          paginationOptions.sort = null;
        } else {
          paginationOptions.sort = sortColumns[0].sort.direction;
        }
        getPage();
      });
      gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {
        paginationOptions.pageNumber = newPage;
        paginationOptions.pageSize = pageSize;
        getPage();
      });
    }
  };

  var getPage = function() {
    var url;
    switch(paginationOptions.sort) {
      case uiGridConstants.ASC:
        url = 'https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100_ASC.json';
        break;
      case uiGridConstants.DESC:
        url = 'https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100_DESC.json';
        break;
      default:
        url = 'https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json';
        break;
    }

    $http.get(url)
    .success(function (data) {
      $scope.gridOptions.totalItems = 100;
      var firstRow = (paginationOptions.pageNumber - 1) * paginationOptions.pageSize;
      $scope.gridOptions.data = data.slice(firstRow, firstRow + paginationOptions.pageSize);
    });
  };

  getPage();
}
]);

.grid {
  width: 600px;
}

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-animate.js"></script>

    <script src="http://ui-grid.info/release/ui-grid.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>

<div ng-controller="MainCtrl">
  <div ui-grid="gridOptions" ui-grid-pagination class="grid"></div>
</div>


    <script src="app.js"></script>
  </body>
</html>

Here is the original plunker link as a reference: http://plnkr.co/edit/unizPGE4JCFxr5e5jQut?p=preview

The result I am getting is displayed in the following image. As you can see the pagination area seems to be "broken", with wrong sizing and alignments.

Why is the pagination so crookedly? What can I do with this?

Consider adding the code in the question instead of providing the link to the code. — SBista, Jan 22 '18 at 09:29
@SBista done. I just copied the code from the linked plunker sample to a stackoverflow hosted snippet. — SPArcheon, Jan 22 '18 at 12:10

score 1 · Answer 1 · answered Jan 22 '18 at 09:17

1

If you don't need this pagination controls, you can hide this by add enablePaginationControls false in gridOptions.

And can use other components like 'uib-pagination' for external pagination.

answered Jan 22 '18 at 09:17

Anu Sivanand

66
4

1

why standard pagination is so bad? – DanStopka Jan 22 '18 at 09:19

SPArcheon · Accepted Answer · 2018-01-22T12:03:08.727

Well, let me get started.

First, you are using angular 1.2.26 with the release version of ui-grid. While this doesn't seem to trigger any rendering problem, the official page for UI-Grid advertises a compatibility for Angularjs version 1.4.x to 1.6.x. If you open the developer toolbar you can actually see there is a reported error just because of that.

($scope.$applyAsync was added to Angularjs starting on version 1.3.x. Related info here)

I advise you upgrade to a compatible angularjs version to avoid further problem. Since you are also using the $http.success() construct, which was dropped after angularjs 1.4.3 your best bet is to stick to that version.

As for the pager rendering problem, it would seem that the wrong alignment is caused by the page number input box getting a wrong size. I compared your sample with the one on the official UI-Grid homepage and noticed that in your case the input seems to be missing a box-sizing: border-box setting. Because of this the specified height: 26px; attribute won't include the item padding: so, while on the UI-Grid sample the input will be 26 px high including the 5px padding, in your plunker the padding are added to the height, resulting in a 26+5+5 px high input that is obviously higher than any other element on the line.
Based on my observation, the border-box setting on the original sample is coming from bootstrap-flatly.min.css. I didn't find any notice of bootstrap begin an explicit requirement for paging support, but I don't exclude it. Anyway, in your specific case, adding the missing attribute on the input should be enough.

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pagination']);

app.controller('MainCtrl', [
'$scope', '$http', 'uiGridConstants', function($scope, $http, uiGridConstants) {

  var paginationOptions = {
    pageNumber: 1,
    pageSize: 25,
    sort: null
  };

  $scope.gridOptions = {
    paginationPageSizes: [25, 50, 75],
    paginationPageSize: 25,
    useExternalPagination: true,
    useExternalSorting: true,
    columnDefs: [
      { name: 'name' },
      { name: 'gender', enableSorting: false },
      { name: 'company', enableSorting: false }
    ],
    onRegisterApi: function(gridApi) {
      $scope.gridApi = gridApi;
      $scope.gridApi.core.on.sortChanged($scope, function(grid, sortColumns) {
        if (sortColumns.length == 0) {
          paginationOptions.sort = null;
        } else {
          paginationOptions.sort = sortColumns[0].sort.direction;
        }
        getPage();
      });
      gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {
        paginationOptions.pageNumber = newPage;
        paginationOptions.pageSize = pageSize;
        getPage();
      });
    }
  };

  var getPage = function() {
    var url;
    switch(paginationOptions.sort) {
      case uiGridConstants.ASC:
        url = 'https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100_ASC.json';
        break;
      case uiGridConstants.DESC:
        url = 'https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100_DESC.json';
        break;
      default:
        url = 'https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json';
        break;
    }

    $http.get(url)
    .success(function (data) {
      $scope.gridOptions.totalItems = 100;
      var firstRow = (paginationOptions.pageNumber - 1) * paginationOptions.pageSize;
      $scope.gridOptions.data = data.slice(firstRow, firstRow + paginationOptions.pageSize);
    });
  };

  getPage();
}
]);

.grid {
  width: 600px;
}

.ui-grid-pager-control-input{
  box-sizing: border-box !important;
}

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>

    <script src="http://ui-grid.info/release/ui-grid.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>

<div ng-controller="MainCtrl">
  <div ui-grid="gridOptions" ui-grid-pagination class="grid"></div>
</div>


    <script src="app.js"></script>
  </body>
</html>

As you can see in the above sample, I switched the referenced angularjs file version to 1.4.3 and I added the following css rule:

.ui-grid-pager-control-input{
      box-sizing: border-box !important;
}

This is the result:

still not very nice, but it seems to be identical to the result I am seeing on the official site:

As a final notice, please consider that the pagination api currently seems to be still in early alpha stage (see: http://ui-grid.info/docs/#!/tutorial/214_pagination), so it may not yet fit your need or present mayor bugs.

Why does ui-grid pagination look so crooked?

2 Answers2