Collapsible Should Push Down When Stacked



  • I have a page with a row and three columns and a card with a collapsible inside in each column. The columns stack responsibly as they should but when a collapsible item is clicked this item does not push down the collapsible below.

    Also, when the row of cards wraps — when sidebar is open for example — I see negative top margin on the card that has wrapped.

      .row.gutter-xl.wrap.justify-center
        .column
          q-card(inline style='width: 300px')
            q-card-title
              i.fas.fa-chess.fa-lg.q-mr-md
              | Cartas Fora do Baralho
             q-card-separator
               q-list
                 q-collapsible(group='third-o' icon='all_inclusive' label='In Principio')
                   div
                    | Φαβθλασ οπορτεατ ρεπρεηενδθντ cθμ ει. 
    | Ιν ασσθμ cονγθε δοcενδι qθι, vιξ ετ ιμπετθσ θτροqθε δολορεμ. Ει qθισ αλιqθιπ προδεσσετ vιξ.


  • Can you provide a jsfiddle so we can visualize this? https://jsfiddle.net/rstoenescu/waugrryy/