Pagination styling is broken on IE9.

[alexandery]

Pagination styling is broken on IE9. Here are the screenshots from IE9 and FF of one of the tutorial pages:

IE9:

FF:

[wallsoferico]

One solution I've found is:

.ui-grid-pager-panel {
    position:relative;
    display: inline-block;
}

.ui-grid-pager-max-pages-number {
    vertical-align: top;
}

the ui-grid-pager-max-pages-number vertical position might not be the best but because of the line-height of the footer it's difficult to position it properly. If the line height is set to 1 then vertical-align: middle would work fine.

Hope this helps

[PaulL1]

Is this still happening? I saw a different IE pagination issue that seemed to suggest it was slightly overlaying the scrollbar, which implies this isn't happening any more.

[zhusulai]

Can confirm this issue is still happening on IE9.

[hikalkan]

Hi,

Not only IE9 but also for IE11. You can check http://ui-grid.info/docs/#/tutorial/214_pagination

[JLLeitschuh]

This is an issue that is not exclusive to IE. Seems very inconsistent and hard to reproduce.

[hikalkan]

Interesting.. but it always happens when I try :)

[dalin92]

Anyone know anything more about a fix for pagination overlapping the grid? I need to support IE and I'm unsure how to fix this.

[ashwin027]

@JLLeitschuh @dalin92 @hikalkan The reason why this is happening is because the adjustment values are different in IE when compared to chrome and firefox. The adjustment is subtracted from the total height to get a final viewport height.

e.ownerDocument.defaultView.getComputedStyle(e, null)

The above statement is used in the getStyles function which returns a different height in IE when compared to other browsers. The reason being that the height in IE is excluding padding whereas the height in chrome and firefox is including padding.

Possible fixes:

Option 1: We could change the box-sizing property to content-box and let the code handle it,

File: Pagination.less

.ui-grid-pager-panel {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding-top: 3px;
    padding-bottom: 3px;
    box-sizing: content-box;
}

File: pagination.js

uiGridCtrl.grid.renderContainers.body.registerViewportAdjuster(function (adjustment) {
   adjustment.height = adjustment.height - gridUtil.elementHeight($elm, "padding");
   return adjustment;
});

Once we change to content-box, the padding will be ignored when the height is computed which brings all browsers on the same playing field. Once we pass option "padding" to the elementHeight function, it reduces the height by the padding (6px) which aligns the controls correctly (IE10+).

PR #4616

Option 2:
We can add a min-height property of 32px to the .ui-grid-pager-panel class and then add another function to the gridutils to pull the min-height property for the panel and reduce the height of the viewport by the min-height which should fix this issue. I dont have a PR for this but let me know if you need one. This option is more invasive than option 1.

[SoundLogic]

+1 for this issue - happens consistently for me

[anitapillai]

+1 for this issue - happens consistently

[TeChn4K]

Same problem. Chrome is OK but Firefox not

[TeChn4K]

I use another temp fix. My needs : hidden scrollbars, adaptive height and pagination.

ui-grid js conf :

...
enableHorizontalScrollbar: 0,
enableVerticalScrollbar: 0,
...

css overload

.ui-grid, .ui-grid-viewport {
  height: auto !important;
}

.ui-grid-pager-panel {
   position: relative;
   left: auto;
   bottom: auto;
   padding-top: 0;
   padding-bottom: 0;
}

.ui-grid-pager-container, .ui-grid-pager-count-container {
 margin-top: 10px;
}

[jodibean]

I have issues with IE11 and FireFox (FireFox looks way worse). Is there a workaround?

[marcindopart]

Only for IE you can:
.ui-grid { position: relative; }
and
.ui-grid-pager-panel { position: absolute; left: 0; bottom: -3px; width: 100%; padding-top: 3px; padding-bottom: 3px; box-sizing: content-box; }

For me this solution looks good (screens below)

(IE11)

(IE9)

[dipankarpaul]

The above solution worked for me. You can also follow the below link.

[http://dp1981.blogspot.com/2016/07/ui-grid-ie9-pagination-issue.html]

[vcfvct]

Having the same issue in IE9 which the position:absolute + bottom:-30px does not work.
Have to apply the below css:

.ui-grid .ui-grid-pager-panel{
  bottom: -5px;
  position: relative;
}

[mportuga]

Removed IE9 support.

[JLLeitschuh]

@mportuga When you make a release with that change. Remember that according to Semver, that's a major version breaking change and you should rev the major version number.

[mportuga]

@JLLeitschuh So, the reason for not making it a major version at the moment is because 5.0.0 is currently planned to be the angular 5 release. So I will unfortunately not be following Semver conventions correctly for the near future. However, I did call it out in the Changelog, if that makes it a little better.

[JLLeitschuh]

Fair enough.