[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