vue-treeselect
vue-treeselect copied to clipboard
Expand treeselect width to the max item width
Hello,
I've been looking through the docs but I haven't been able to find a way to expand the treeselect width equaling the select option with the longest width.
I was trying to avoid hiding a part of the option labels and show them entirely in the select automatically, instead of specifying a width for each of vue-treeselect instances as all of them can differ from each other.
Thanks
Has anyone found out the way to do this? The drop down is fixed and does not show deep nested items.
Any update on that one?
I struggled with this issue too.
An OK "solution" is to add the following css:
.vue-treeselect__menu-container { width : XXX !important; }
This will increase the width of the opened dropdown (not the actual top element).
It isn't dynamic though, but it was good enough for my use case.
I also found can change the font size and padding etc. via, which might be useful to some
label.vue-treeselect__label { font-size: padding: }
try this
.vue-treeselect.vue-treeselect--single { .vue-treeselect__menu { min-width: 100%; .vue-treeselect__option { display: flex; flex-wrap: nowrap; vertical-align: middle; .vue-treeselect__option-arrow-placeholder { flex: none; } .vue-treeselect__option-arrow-container { flex: none; display: flex; align-items: center; justify-content: center; padding-bottom: 2px; } .vue-treeselect__label-container { flex: none; display: block; width: auto; } } } }
I made a workaround with following
@open="onOpenMenu" @close="onCloseMenu"
onSearchChange(instance) {
setTimeout(() => {
let maxWidth = 0;
this.$el.getElementsByClassName('vue-treeselect__label').forEach(v => {
if (!v.parentNode.parentNode.classList.contains('vue-treeselect__option--hide')) {
const width = this.getTextWidth(v.innerHTML);
if (width > maxWidth) {
maxWidth = width;
}
}
});
this.$el.getElementsByClassName('vue-treeselect__menu-container').forEach(v => {
const parentWidth = v.parentNode.clientWidth;
if (parentWidth < maxWidth + 80) {
v.style.width = maxWidth + 80 + 'px';
} else {
v.style.width = '100%';
}
});
}, 100);
},
onOpenMenu(instance) {
setTimeout(() => {
let maxWidth = 0;
this.$el.getElementsByClassName('vue-treeselect__label').forEach(v => {
const width = this.getTextWidth(v.innerHTML);
if (width > maxWidth) {
maxWidth = width;
}
});
this.$el.getElementsByClassName('vue-treeselect__menu-container').forEach(v => {
if (v.clientWidth < maxWidth + 80) {
v.style.width = maxWidth + 80 + 'px';
}
});
}, 100);
},
onCloseMenu(instance) {
this.$el.getElementsByClassName('vue-treeselect__menu-container').forEach(v => {
v.style.width = '100%';
});
},
getTextWidth(val) {
const text = document.createElement('span');
document.body.appendChild(text);
text.style.font = 'Nunito Sans';
text.style.fontSize = 12 + 'px';
text.style.height = 'auto';
text.style.width = 'auto';
text.style.position = 'absolute';
text.style.whiteSpace = 'no-wrap';
text.style.top = '0';
text.style.lefte = '0';
text.innerHTML = val;
const width = Math.ceil(text.clientWidth);
document.body.removeChild(text);
return width;
},