Feature: Vertically Responsive Paginated Table + possible issue fix + pull request

To make ui-grid with client-side pagination suitable for the enterprise level application I work on, I needed to remove the empty space ui-grid occasionally displays between rows and footer when using pagination (mostly on the last results page). This was to match other tables used in our application.

(See also Issue #3977)

I also needed to make it vertically responsive.

I have done this, see this demo Plunker:

https://plnkr.co/edit/RmTG3Ham372d6Wcnlz5h?p=preview

The changes to make make ui-grid do this are:

• Changing the property that ui-grid sets on the class .ui-grid-viewport from height: to max-height: in ui-grid.js. Line 2774
• Removing the height: 100%; declaration set on the class .ui-grid-contents-wrapper in ui-grid.css. Line 67
• Changing the declaration set on the class .ui-grid-pager-panel from position: absolute to position: relative. Line 1258

Then added some vertical media queries.

For the demo Plunker I created a very basic function that removes the relevant classes and replaces them with updated classes that the updated css is then applied to.

Here's a demo with with just the function and these css changes (no fancy formatting):

https://plnkr.co/edit/690P6xPYogAdNlowSbhj?p=preview

I have also created a new topic branch: resizing-inner-canvas-for-number-of-elements containing these changes.

Please let me know if you’d like me to commit this, and any issues involved in this process, changes to my fix you’d like, etc, etc.

Videos of the tables in action are in issue #5603