Nuxt•8mo ago

tailwindcss grid container

using @nuxt/ui (tailwindcss) I have a <u-dashboard-panel-content /> containing two "h-[50%]" cards and I would like each having their default slot used by a grid made by columns occupying all the available space but overflow-x-scroll. for this I have this structure inside a the card but anything I try either ends in a single row or the ul overflowing. could you enlighten me on how is this usually solved?

<div class="overflow-x-scroll"><!-- flex-1 within the card -->
  <ul><!-- grid grid-col -->
    <li v-for><my-indicator /></li><!-- fixed reactive size grid cells -->
  </ul>
</div>

<div class="overflow-x-scroll"><!-- flex-1 within the card -->
  <ul><!-- grid grid-col -->
    <li v-for><my-indicator /></li><!-- fixed reactive size grid cells -->
  </ul>
</div>

my next goal is to manage the overflow using dynamic tabs or pagination

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

tailwindcss grid container