Grid height activating scroll intermittently

Hi there! I’ve run across a possible bug that happens when the grid heigh is on the threshold that the browser defines for showing/hiding the scrollbar:

I have colWidth is set to ‘auto’ and rowHeight is ‘match’.

This happens when for example the grid has four rows, but if it had a fifth the grid height it would be on the browser scrollbar overflow threshold.

It seems there are two watches that are triggering other’s, always updating their size. as a workaround I commented the line

function updateHeight() {
    $elem.css('height', (gridster.gridHeight * gridster.curRowHeight) + (gridster.outerMargin ? gridster.margins[0] : -gridster.margins[0]) + 'px');
}

This workaround is not great because then the grid has no real heigh…

[andrey-skl]

So I have researched a workaround for that. The main Idea is reducing my app container right margin with scroll width when it appears. So scroll appearing doesnt change actual document height and gridster doesnt goes to this infinite loop of resizing.

There is a directive for scrollbar width detecting I’m using. So I created a directive which reacts on gridster resizes and add/remove margin shift if needed.

import scrollbarWidth from 'scrollbar-width';

...
  .directive('dshGridScrollCompensator', function () {
    return {
      restrict: 'A',
      link: function (scope, iElement) {
        var element = iElement[0];
        var scrollWidth = scrollbarWidth();
        var defaultMarginRight = window.getComputedStyle(element).marginRight;
        console.log('scroll bar width', scrollWidth);

        scope.$on('gridster-resized', () => {
          var hasOverflow = document.body.offsetHeight < document.body.scrollHeight;

          if (hasOverflow) {
            var compensatedMargin = parseInt(defaultMarginRight) - scrollWidth;
            element.style.marginRight = compensatedMargin + 'px';
          } else {
            element.style.marginRight = defaultMarginRight;
          }
        });
      }
    };
  });

I applied this directive on my application container div which has margins 32px by default. So now when scroll appears it reduces to 17px.

Tested on latest master (ManifestWebDesign/angular-gridster#281de99) but should work on any version.

[andrewjb123]

as a temporary work around i simply applied:

overflow-y: scroll

to the grid - this makes the y scroll bar appear always, which stops the scroll bar showing and hiding which affects the alignment of the tiles.

not ideal as the y scroll always shows, but it solved a headache for me