vertical scroll bar not visible in ScrollAreaDemo

[amandayyang15]

Copied and pasted the Scroll-area code, but the scroll bar is not visible.

I tried adding <ScrollBar orientation="horizontal" />, but the problem still persists.

missing scroll bar demo

layout.tsx

const tags = Array.from({ length: 50 }).map(
  (_, i, a) => `v1.2.0-beta.${a.length - i}`
);

export function ScrollAreaDemo() {
  return (
    <ScrollArea
      className="h-72 rounded-md border"
      // style={{ maxHeight: "160px" }}
    >
      <div className="p-4">
        <h4 className="mb-4 text-sm font-medium leading-none">Files</h4>
        {tags.map((tag) => (
          <>
            <div key={tag} className="text-sm">
              {tag}
            </div>
            <Separator className="my-2" />
          </>
        ))}
      </div>
      {/* <ScrollBar orientation="vertical" /> */}
    </ScrollArea>
  );
}

[dan5py]

Hi @amandayyang15, just tried and it works fine to me. Can you provide more info like what browser are you using?

[BoreasHe]

Hi, I encountered the same issue. Here is one of the possible cause/solution: I installed shadcn during my development and I didn't want the shadcn init overwrite my config files therefore I manually merge the config files from the doc and mine. I did make some changes to the paths as well.

So I also tried other shadcn components and none of them work(e.g. Drawer), so I thought some of the config files mess up. I eventually found the line I missed in tailwind.config.js:

export default {
  content: [
    './index.html',
    './src/**/*.{tsx,ts}',
+   './@/components/**/*.{tsx,ts}'
  ],
...

...to make tailwind work inside the ./@ folder. And it works now. Hope that helps.

ref: https://ui.shadcn.com/docs/installation/manual

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.