[Q-Select] Dropdown width for long option items

[DOOMitru]

Is there a way to make the width of the dropdown for long option items be the same as the width of the q-select itself without having to hard code a max-width?

The second example in the image is what I'm trying to achieve without having to hard code a value for max-width of the drop down items:

Here's the codepen I used to create the screenshot.

[pdanpdan]

No, sorry

[pbkompasz]

You can do something like this.

[DOOMitru]

Yeah... that's what I ended up doing but it doesn't really fix the problem. You're still using a hard coded max width, which means it doesn't update in a responsive layout that would normally change the width of the q-select relative to the viewport width.

[metalsadman]

you can use https://quasar.dev/quasar-utils/dom-utils and set reactive width for you options.

[pbkompasz]

<q-select ref="selectRef"> </q-select>

You can access the QSelect's width selectRef.value.clientWidth and watch for it's change.

[metalsadman]

use https://quasar.dev/vue-components/resize-observer#introduction

https://codepen.io/metalsadman/pen/PoOvqBB?editors=1010

[DOOMitru]

Interesting workaround. Thanks.

[BenJackGill]

Thanks for this answer, because I have the same problem. But I feel like this functionality should be baked in. Maybe it could be turned on using a prop.

[loyaj]

Thanks from me as well, the code with resize-observer was especially helpful.

One thing I see it's not handling, though, is when scrollbars appear or disappear in the menu after it opens:

(I'm on macos with "Show scroll bars" set to "Always" in system preferences.)

Another problem I ran into is that q-select emits the popup-show event before the menu is fully initialized. At that point, the virtual scroll container doesn't have elements yet, so we can't accurately determine whether the menu will have scrollbars.

To work around these problems, I've attached another ResizeObserver to the menu itself, to re-calculate the scrollbar width when the menu size changes:

You can see the code here: @loyaj/quasar-select-menu-scrollbar-fix
Or run it on stackblitz

Cheers

[Novembert]

Not sure if this was mentioned already. I think I found a simpler solution. It looks like quasar sets min-width and max-width on the displayed dropdown. The min-width seems to always fit the width of the form field which this dropdown belongs to. If you use the popup-content-class prop, and pass it a class which has this definition in your .scss

.select-dropdown {
  // Quasar sets min-width on the popup content to match the form fields width.
  // If we set popup content to have width: 0, but quasar sets the min-width,
  // then browser will make the element have exactly the width defined by min-width.
  // This way we make sure the select options don't take more space horizontally
  // than the form field itself.
  width: 0px !important;

  // We also want to truncate the labels instead of wrapping into multiple lines.
  .q-item__label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

then you'll also achieve the same result as with resize observers. Please let me know if that works for you too :)