Open OlegSuncrown opened 8 months ago
Thank you @OlegSuncrown
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 @OlegSuncrown π I'm taking a look at it right now. I think to stay as adaptive as possible, without changing everything that has been done for the collapse, is to change top position of the arrow icon. This is consistent with the collapse "arrow plus/minus icon". I'm open to other proposals until the PR is reviewed π
This fix caused the arrow being not centered when the title bar is not the default height.
Thanks for your feedback, I'll take a look and suggest another solution.
After trying different approaches, I can't seem to solve the problem. I've noticed that my first idea solved the problem, but it's no longer centered. However, when the top is defined as a percentage, the problem persists. Looking for another solution, I found that by placing the svg in the dom, we could probably align the text and arrow without the problem of displacement when rotating. This involves changing the architecture of the component. Moreover, the component with the plus/minus icon isn't centered either when the title is longer.
If anyone can find a simpler solution, I'd be very interested. π
What version of daisyUI are you using?
v4.5.0
Which browsers are you seeing the problem on?
Chrome
Reproduction URL
https://play.tailwindcss.com/EqKz1x2vVS
Describe your issue
Collapse with checkbox and icon with more content has Arrow Icon what is jumping but plus/minus icon seems ok. In the Arrow Icon:
.collapse-arrow > .collapse-title:after { top: 50% }
that's why animations is weird, but it properly centered. In the.collapse-plus > .collapse-title:after { top: 0.9rem; }
that's why it looks ok.Maybe something like this: https://play.tailwindcss.com/i2LKgeYQ1o?file=css