-
-
Notifications
You must be signed in to change notification settings - Fork 988
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Vue multiselect inside of element with scrollbar #723
Comments
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 |
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. |
Is there any way we can overcome this issue. I want dropdown to appear above overflow (it is blocked by overflow). |
I've used @sigma207 directive, but unfortunately I've got two issues with it:
I've patched it to use 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. // 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
);
},
}; |
@Kocal It work's only for the not scrollable parent with a select within. In another case, I have this result |
@ryzhak-andrii I think I had the same issue than you, can you try the new snippet in #723 (comment)? I'm now setting |
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. |
This workaround worked for me: .multiselect__content-wrapper { |
Anyone got this working on vue3? |
Trying installing the latest beta version as that supports Vue 3. If you are still having issues, please open a new issue |
More I meant the gists, they seem to work only with vue2 |
Hi, firstly thank you for a great plugin, it's really great.
I found one issue with using vue vue-multiselect inside of elements with
overflow:auto
. After to expand, vue multiselect is still inside of the element with overflow auto, which is not how the standard<select>
works.Fiddle: https://jsfiddle.net/jqofkzxc/3078/
Expected behaviour: After to expand the vue-multiselect (
.multiselect__content-wrapper
) shouldn't cause the.modal-body
to expand.Possible fix: This could be achieved by setting it outside of element with overflow (.modal-body in that case), and using position absolute + dynamically counted left/top css.
Why? It would make it much easier to use it in replacement to standard without any hacks.
The text was updated successfully, but these errors were encountered: