You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Thank you @ooker777
for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I
find a solution.
In the meantime providing more details and reproduction links would be
helpful.
You can prevent that by setting grid-column of the tab panel to the amount of tabs you have:
<divclass="w-[274px]"><divrole="tablist" class="tabs tabs-lifted"><inputtype="radio" name="my_tabs_2" role="tab" class="tab" aria-label="Tab 1 is very long" />
<divrole="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6"></div><inputtype="radio" name="my_tabs_2" role="tab" class="tab" aria-label="Tab 2 is very very long" checked />
<divrole="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.
I'm using radio tab lifted + tab content. The code is the same with the demo, except the tab names are long:
In mobile, I expect each tab to have its own row, so they don't get shrunk like this:
I see this on Firefox
Reproduction URL: https://play.tailwindcss.com/kuDMa8J3sD?layout=preview&size=198x720
The text was updated successfully, but these errors were encountered: