search

ng-select / ng-select

:star: Native angular select component
https://ng-select.github.io/ng-select/
MIT License
3.26k stars 900 forks source link

Dropdown positioned wrong in case appending it to different scrollable parent #2356

Open slavede opened 3 months ago

slavede commented 3 months ago

Describe the bug When body is not scrollable (overflow hidden), I want to have attached ng-select to main content div (which has overflow:auto). Now, when _updateYPosition is called it takes into account top like this:

this._dropdown.style.top = offsetTop + delta + "px";

It should take a scrollTop of the 'appendTo' element and add that as well

This way, on open sets it to wrong positiong regarding y axis

Reproducbile example https://stackblitz.com/edit/stackblitz-starters-kyjvws

Expected behavior It should take a scrollTop of the 'appendTo' element

Screenshots image

Desktop (please complete the following information):

Additional context Add any other context about the problem here.

slavede commented 3 months ago

I've tried overriding it and it works fine then

  const select = dropdownPanel['_select'].getBoundingClientRect();
  const parent = dropdownPanel['_parent'].getBoundingClientRect();
  const delta = select.height;
  if (dropdownPanel['_currentPosition'] === 'top') {
    const offsetBottom = parent.bottom - select.bottom;
    const parentScroll = dropdownPanel['_parent'].scrollTop;

    dropdownPanel['_dropdown'].style.bottom = offsetBottom + delta - parentScroll + 'px';
    dropdownPanel['_dropdown'].style.top = 'auto';
  } else if (dropdownPanel['_currentPosition'] === 'bottom') {
    const offsetTop = select.top - parent.top;
    const parentScroll = dropdownPanel['_parent'].scrollTop;
    dropdownPanel['_dropdown'].style.top = offsetTop + delta + parentScroll + 'px';
    dropdownPanel['_dropdown'].style.bottom = 'auto';
  }