Expand treeselect width to the max item width

[IvoPereira]

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

[aamuz]

Has anyone found out the way to do this? The drop down is fixed and does not show deep nested items.

[BartusZak]

Any update on that one?

[kirkHawksworth]

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: }

[longqizhu]

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; } } } }

[sabandemirci]

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;
    },