pagination control overlaps with the horizontal scroll bar in IE11

[yurigenin]

[MartinChavez]

I repro this with Firefox (38.0) and Chrome (Version 42.0.2311.90 m)

I am running this locally using : ui-grid - v3.0.0-RC.18-d9b2314 - 2015-01-06

Please let me know if there is a local workaround.

[sheruace21]

Has there been a resolution to this issue? I still see it on chrome (Version 43.0.2357.132 m)

[masongup]

I'm getting this problem intermittently on our site, so far observed on IE11 for some of our grids, while Chrome works fine. The issue seems to be with the style for the ui-grid-viewport class, which specifies a height - when I manually adjust the height in the IE one to match the value in Chrome, then it looks right. That particular style element is generated here, from a calculated viewportHeight variable, which is already being adjusted for the scrollbarHeight. I'm not sure yet what's going wrong there, but I'll look further if I have time.

[Atmos206]

I found that this only occurs in IE11, have had no issues with Chrome. Perhaps the problem with chrome is a similar but different issue.

I managed to track down the problem for IE11, however. It stems from calculating the height of pagination container (.ui-grid-pager-panel).

The height of the container is retrieved using getWidthOrHeight. This function uses computed style from the browser to get height.

The problem is, IE ignores padding in computed height. You can see this when comparing the computed height between Chrome and IE.

Chrome:

IE11:

What do you know? The difference between the Chrome and IE is 6px, and the top+bottom padding on the element just happens to be... Yup, 6px.

I implemented a temporary fix for now in my own code by modifying getWidthOrHeight to get clientHeight/clientWidth instead of computed styles. I am unsure if this causes problems with any of UI-Grids features, since there are so many! I have yet to see any issues because of it, but there may have been a reason that clientWidth/clientHeight were not used in the first place.

I placed it just after the check if value <=0 || val == null:

  if ( val <= 0 || val == null ) {
      // Fall back to computed then uncomputed css if necessary


      // IE does not add padding to computed height (getStyles) for absolute positioned elements, but all other standard browsers do.
      // This causes incorrect height calculations in IE.
      // Short fix is to use clientHeight instead of computed style.
      val = (name == 'height') ? elem.clientHeight : elem.clientWidth; //styles[name];

Here is the full function w/ modification

function getWidthOrHeight( elem, name, extra ) {
  // Start with offset property, which is equivalent to the border-box value
    var valueIsBorderBox = true;
    var val; // = name === 'width' ? elem.offsetWidth : elem.offsetHeight,
    var styles = getStyles(elem);
    var isBorderBox = styles['boxSizing'] === 'border-box';

  // some non-html elements return undefined for offsetWidth, so check for null/undefined
  // svg - https://bugzilla.mozilla.org/show_bug.cgi?id=649285
  // MathML - https://bugzilla.mozilla.org/show_bug.cgi?id=491668
  if ( val <= 0 || val == null ) {
      // Fall back to computed then uncomputed css if necessary

      // IE does not add padding to computed height (getStyles) for absolute positioned elements, but all other standard browsers do.
      // This causes incorrect height calculations in IE.
      // Short fix is to use clientHeight instead of computed style.
      val = (name == 'height') ? elem.clientHeight : elem.clientWidth; //styles[name];


    if ( val < 0 || val == null ) {
      val = elem.style[ name ];
    }

    // Computed unit is not pixels. Stop here and return.
    if ( rnumnonpx.test(val) ) {
      return val;
    }

    // we need the check for style in case a browser which returns unreliable values
    // for getComputedStyle silently falls back to the reliable elem.style
    valueIsBorderBox = isBorderBox &&
            ( true || val === elem.style[ name ] ); // use 'true' instead of 'support.boxSizingReliable()'

    // Normalize "", auto, and prepare for extra
    val = parseFloat( val ) || 0;
  }

  // use the active box-sizing model to add/subtract irrelevant styles
  var ret = ( val +
    augmentWidthOrHeight(
      elem,
      name,
      extra || ( isBorderBox ? "border" : "content" ),
      valueIsBorderBox,
      styles
    )
  );

  // dump('ret', ret, val);
  return ret;
}

[Atmos206]

This appears to have been fixed in more recent versions of UI-Grid, for anyone experiencing this issue.

[ojraqueno]

I am still getting the issue. Chrome Version 63.0.3239.132