Search code examples
csstabstailwind-cssdaisyui

Why are the tab label widths started to squish when their respective content panels have more than 32 characters?

I'm using daisyUI's radio tab lifted + tab content. The code is the same with the demo, except the I only use 2 tabs and fill content to them:

<div role="tablist" class="tabs tabs-lifted">
  <input type="radio" name="my_tabs_2" role="tab" class="tab" aria-label="Tab 1 is very long" />
  <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6"></div>

  <input type="radio" name="my_tabs_2" role="tab" class="tab" aria-label="Tab 2 is very very long" checked />
  <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
    1111 2222 3333 4444 5555 6666 77
  </div>
</div>

(Tailwind Playground)

At 32 characters, the tab label widths behave as expected: they fill all the horizontal space:

enter image description here

Starting from 32, they squish a little bit:

enter image description here

Each addition character squishes the width more. It reaches its minimum at 53 characters:

enter image description here

If we start again, but this time we use no space, then the maximum length is 7 before it start squishing:

enter image description here

The width reaches its minimum when the character length uses up the available horizontal space:

enter image description here

The squish only takes effect on its respective tab. The other one is intact.

Why does this happen? How do I prevent this?

Solution

  • You can prevent that by setting grid-column of the tab panel to the amount of tabs you have:

    <script src="https://cdn.tailwindcss.com/3.4.1"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/daisyui/4.6.1/full.css" integrity="sha512-XpYSkIPzmQpbWTGbLUWq0HyRQ5n9RZFeH8TrfqIykNiE8OXQLn207Am0aU4nVplNE8vvJ1qCY6JvD9weUAyosQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="w-[274px]">
  <div role="tablist" class="tabs tabs-lifted">
    <input type="radio" name="my_tabs_2" role="tab" class="tab" aria-label="Tab 1 is very long" />
    <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6"></div>

    <input type="radio" name="my_tabs_2" role="tab" class="tab" aria-label="Tab 2 is very very long" checked />
    <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6 !col-span-2">
      11112222333344445555666677
    </div>
  </div>
</div>

    As for why it happens, the .tab-content has:

    grid-column-start: 1;
grid-column-end: span 9999;

    At the small width of 274px, the content of the .tab-content becomes significant and affects the width of these other 9997 grid column tracks that the .tab-content spans, shrinking the grid column tracks that the tab labels reside.