checkboxLayer position with scrollbar

[juriska]

If multiselects are working in scrolled area, then checkboxLayer for the last items is shown in wrong place in Chrome and IE but works correctly in Mozilla.

Here goes plunker. http://plnkr.co/edit/m9hQ54THpmKMGpkvHFYQ?p=preview

Thanks.

[isteven]

Hi @juriska ,

Thanks for replicating the issue, unfortunately as for now I haven't manage to find a solution.

[dbarvitsky]

@juriska and @isteven,

We are using your control (thanks much!) and experience this problem with 4.0.0. It happens because absolute-positioned elements are ignoring the scrollbar positions. Not sure if this is browser behaviour or something lame with our CSS.

Unfortunately we found no elegant solution, but had to patch the source and, right after showing the check box layer, walk up the DOM tree calculating the offset using scrollTop. Something like this:

                var marginTop = 0;
                var cbx = angular.element( checkBoxLayer );
                var p = cbx.parent();
                while(true) {
                  if (p && p.length) {
                      var scrollTop = p.prop('scrollTop');
                      if (scrollTop) {
                        marginTop -= scrollTop;
                      }
                      p = angular.element(p).parent();
                  } else {
                    break;
                  }
                }

                cbx.css('margin-top',marginTop+"px");

The code needs to run before this in $scope.toggleCheckboxes:

                // open callback
                $scope.onOpen();

It can be made more efficient if you analyze the position property of an element and stop once you hit 'absolute' or 'fixed', although I am not sure about that. I am not suggesting it as a commit because it feels quite hacky.

I hope this helps.

[cserpell]

Would you accept this change as a pull request? I am facing the same issue and @dbarvitsky 's piece of code works most of the time (some glitches still arise).

[cserpell]

I managed to fix this just adding position: relative; to the checkboxLayer element, no hack needed.