Overflowing QSelect using multiple chips

[RobbeV]

Hi all,

I’m trying to make a customized Qselect that can hold a lot of dates, which users could pick using a datepicker.
The result would be an array of dates, visualised as rows of QChips.

Whenever I select to many chips however, they just fall outside the borders of the QSelect component.
I tried QVirtualScroll, but can’t get it right.

Could anyone teach me some new tricks?

Please find a CodePen attached.

Thanks in advance!
Robbe

[tof06]

@RobbeV You can try to use the selected slot to add a q-scroll-area inside.
There’s some limitation though… You have to define a height on q-scroll-area to make it work, and you have to handle yourself the removing of chips

Something like on this pen : https://codepen.io/cp-tof06/pen/wvaNeVx

[RobbeV]

@tof06 Thanks a lot for your help!
The removing of chips was a pain and using a given height in stead of min-height is quite unfortunate in the UI, but I can live with that.
Hopefully this can be done better in some future version of Quasar or with more experience.