Search code examples
reactjstailwind-cssshadcnui

How to use absolute positioning in Shadcn Accordion?

I have a Shadcn accordion component, and inside this I have a div that I want to overlay with a notification icon in the top right corner. To achieve this, I'm using absolute position within the div. The issue is that AccordionContent uses the tailwind class overflow-hidden, meaning that the notification can't appear over top of the div. Here's what it looks like so far:

enter image description here

If I remove overflow-hidden from AccordionContent, I get the desired notification effect. The issue then becomes that the accordion contents will overflow during the accordion animation, like this:

enter image description here

Here's my code to reproduce:

export default function Dashboard() {
  return (
    <div className="m-4 w-[25%]">
      <Accordion type="single" collapsible>
        <AccordionItem value="item-1" className="border border-black px-3 bg-white rounded-md">
          <AccordionTrigger className="text-xl font-bold">Notifications</AccordionTrigger>
          <AccordionContent className="bg-white">
            <div className="border border-black w-full h-[50px] relative">
              <div className="absolute -top-2 -right-2 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center text-white">
                9+
              </div>
            </div>
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    </div>
  );
}

In a more general sense, how can I have absolute positioning within an accordion component without it appearing to overflow during the accordion animation?

Solution

  • I found this answer to be helpful. The element with overflow: hidden should be between relative and absolute positioned elements. So in your case, wrap the Accordion Content with a div with relative position, and remove relative from the inner div:

    <div className="relative"> // add relative div
  <AccordionContent className="bg-white">
    <div className="border border-black w-full h-[50px]"> // remove relative
      <div className="absolute -top-2 -right-2 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center text-white">
        9+
      </div>
    </div>
  </AccordionContent>
</div>