Nuxt•2y ago

tailwindcss grid container

using

@nuxt/ui (tailwindcss)

@nuxt/ui (tailwindcss)

I have a

<u-dashboard-panel-content />

<u-dashboard-panel-content />

containing two

"h-[50%]"

"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

Nuxt•2y ago

Alejandro Mery

tailwindcss grid container

using

@nuxt/ui (tailwindcss)

@nuxt/ui (tailwindcss)

I have a

<u-dashboard-panel-content />

<u-dashboard-panel-content />

containing two

"h-[50%]"

"h-[50%]"

<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

tailwindcss grid container

Similar Threads

tailwindcss grid container

Similar Threads

Similar Threads

Similar Threads