Overflowing QSelect using multiple chips



  • 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.

    alt text

    Could anyone teach me some new tricks?

    Please find a CodePen attached.

    Thanks in advance!
    Robbe



  • @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



  • @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.


Log in to reply