-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
bug: Long tab names are squished #2800
Comments
Thank you @ooker777
for reporting issues. It helps daisyUI a lot 💚
|
I ran into this issue as well |
You can prevent that by setting <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 grid-column-start: 1;
grid-column-end: span 9999; At the small width of 274px, the content of the |
This also solved an issue where Tab 1, when selected, would have a margin-bottom of something large. Tab 2 and 3 were fine but tab 1 would float way above the tab-content. edit: This only occurred when the browser viewport was at a ~large height. Around 680px and higher. |
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: