bug: Tabs using `grid-span: 9999`
lko3001 opened this issue · 3 comments
What version of daisyUI are you using?
4.10.2
Which browsers are you seeing the problem on?
All browsers
Reproduction URL
https://play.tailwindcss.com/ajpvJUchNb
Describe your issue
This is not really a bug report rather a suggestion. I was using tabs and I wanted to turn on the grid visualization of the browser, as soon as I did that, my browser started lagging, and I have a fairly powerful PC. I found out that the root of the problem was the tab content being grid-column-end: span 9999
.
I tried using grid to fix this issue but I couldnt (without manually adding the number of tabs you have), so I chose a flex-based layout, which seems to work as well as the original one but without the need of creating thousands of columns.
I took some code from the docs and only added a few css lines to fix it as you can see here
<div role="tablist" class="tabs tabs-lifted">
<input type="radio" name="my_tabs_2" role="tab" class="tab" aria-label="Tab 1" />
<div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">Tab content 1</div>
<input type="radio" name="my_tabs_2" role="tab" class="tab" aria-label="Tab 2" checked />
<div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">Tab content 2</div>
<input type="radio" name="my_tabs_2" role="tab" class="tab" aria-label="Tab 3" />
<div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">Tab content 3</div>
</div>
That was the code, I just added these lines
.tabs {
display: flex;
flex-wrap: wrap;
}
.tab {
order: 0;
}
.tab-content {
order: 1;
width: 100%;
}
By doing so, the tabs are gonna shrink by default, since they're flex-children, and the tab content wants to take 100% of the parent, so I added the flex wrap to make it go on another line, and added the order
to place .tab-content
as the last element
Thank you @lko3001
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.
Hello, I have the same problem. The proposal is good.
I'd rather wait and see. It occurs on Safari (Mac and iOS) and only with the presence of the avatar component in the tab-content.
Here is my page: https://edge-components.jrmc.dev/avatar
❤️