Vue-multiselect: Vue multiselect inside of element with scrollbar

[shentao]

Yeah, that’s an issue related to the current structure of the code – the dropdown is located just next to the input, thus it is also affected by all the overflows of the code around it.

I think you can try to fix this with some combination of position absolute and static. Here’s a nice article about that: https://css-tricks.com/popping-hidden-overflow/

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[me-singh]

Is there any way we can overcome this issue. I want dropdown to appear above overflow (it is blocked by overflow).

[sigma207]

@me-singh
You can try this directive.

[Kocal]

I've used @sigma207 directive, but unfortunately I've got two issues with it:

• when scrolling, the multiselect does not move and that's weird
• the parent element lose its height since the multiselect is in position: fixed, so next elements are moved up and this is not wanted

I've patched it to use position: absolute instead of fixed, and used an invisible clone to preserve the parent height:

export default {
  install(Vue) {
    Vue.directive('select-overflow', {
      inserted: (el, _binding, vnode) => {
        let originalWidth
        let originalPosition
        let originalZIndex
        let selectIsOpen = false

        // will be used as a placeholder, in order to fix parent height issue (due to position relative)
        const clone = el.cloneNode(true);
        clone.style.visibility = 'hidden';

        vnode.child.$watch('isOpen', isOpen => {
          selectIsOpen = isOpen
          if (isOpen) {
            const { offsetWidth } = el
            originalWidth = el.style.width
            originalPosition = el.style.position
            originalZIndex = el.style.zIndex
            el.style.width = `${offsetWidth}px`
            el.style.position = 'absolute'
            el.style.zIndex = 2
            el.parentNode.insertBefore(clone, el.nextSibling); // insert after el
          } else {
            el.style.position = originalPosition
            el.style.width = originalWidth
            el.style.zIndex = originalZIndex
            clone.parentNode.removeChild(clone);
          }
        })

        window.addEventListener('wheel', event => {
          if (selectIsOpen) {
            // disabled outside scroll when select is open
            event.stopPropagation()
          }
        }, true)
      },
    })
  }
}

EDIT: I've encountered some issues with the vue-multiselect's position in a scrollable element, which was not displayed properly.
I'm now setting position: relative to the parent element and it's now working well:

// See https://github.com/shentao/vue-multiselect/issues/723#issuecomment-596988587
// and https://gist.github.com/sigma207/b9300fe12a996c07b2389ee03c1464ed

export const directiveOverflow = {
  inserted: (el, _binding, vnode) => {
    let originalParentPosition;
    let originalWidth;
    let originalPosition;
    let originalZIndex;
    let selectIsOpen = false;

    // will be used as a placeholder, in order to fix parent height issue (due to position relative)
    const clone = el.cloneNode(true);
    clone.style.visibility = 'hidden';

    vnode.child.$watch('isOpen', (isOpen) => {
      selectIsOpen = isOpen;

      if (isOpen) {
        const { offsetWidth } = el;
        originalParentPosition = el.parentElement.style.position;
        originalWidth = el.style.width;
        originalPosition = el.style.position;
        originalZIndex = el.style.zIndex;
        el.parentElement.style.position = 'relative';
        el.style.width = `${offsetWidth}px`;
        el.style.position = 'absolute';
        el.style.zIndex = 9999;
        el.parentNode.insertBefore(clone, el.nextSibling); // insert after el
      } else {
        el.parentElement.style.position = originalParentPosition;
        el.style.position = originalPosition;
        el.style.width = originalWidth;
        el.style.zIndex = originalZIndex;
        clone.parentNode.removeChild(clone);
      }
    });

    window.addEventListener(
      'wheel',
      (event) => {
        if (selectIsOpen) {
          // disabled outside scroll when select is open
          event.stopPropagation();
        }
      },
      true
    );
  },
};

[ryzhak-andrii]

@Kocal It work's only for the not scrollable parent with a select within. In another case, I have this result

[Kocal]

@ryzhak-andrii I think I had the same issue than you, can you try the new snippet in https://github.com/shentao/vue-multiselect/issues/723#issuecomment-660342650? I'm now setting position: relative to the vue-multiselect parent.

[yasoza]

Here, did the fix for overflow or z-index issues by appending options to body with the help of@Kocal's comment and appending the options to body.
PR