Select is unscrollable

[daominhwysi]

I have a trouble with select components of shadcn is can't scroll when select item is more higer than the screen. removed overflow-hidden in components/ui/select file still can't solve the problem

[neilk17]

You can try to set the max-height or use overflow-y https://tailwindcss.com/docs/overflow#scrolling-if-needed

[dan5py]

Hi @DaQMinh, as @neilk17 suggested, you can make your SelectContent scrollable by passing overflow-y-auto and max-h-[YOUR_CHOICE] classes. Like this:

<SelectContent className="overflow-y-auto max-h-[10rem]">
        <SelectGroup>
          <SelectLabel>Fruits</SelectLabel>
          <SelectItem value="apple">Apple</SelectItem>
          <SelectItem value="banana">Banana</SelectItem>
          <SelectItem value="blueberry">Blueberry</SelectItem>
          <SelectItem value="grapes">Grapes</SelectItem>
          <SelectItem value="pineapple">Pineapple</SelectItem>
        </SelectGroup>
</SelectContent>

[diptaMVN]

Hi @dan5py, your given example is not working from my side. But if I add that class (overflow-y-auto max-h-[10rem]) on SelectGroup, then It is working but It can't scrolling by mouse scroll wheel.

[giacomoferretti]

Hi @dan5py, your given example is not working from my side. But if I add that class (overflow-y-auto max-h-[10rem]) on SelectGroup, then It is working but It can't scrolling by mouse scroll wheel.

You need to put it on SelectContent.

[diptaMVN]

@giacomoferretti I put it on SelectContent. but it can't scrolling.

[jeffmerrick]

@diptaMVN This also occurred for me when the select was in a dialog. Changing the dialog component so DialogPrimitive.Content is wrapped in DialogOverlay instead of a sibling fixed the issue and allowed the overflow and max-h classes to work.

[Apestein]

Hi @DaQMinh, as @neilk17 suggested, you can make your SelectContent scrollable by passing overflow-y-auto and max-h-[YOUR_CHOICE] classes. Like this:

<SelectContent className="overflow-y-auto max-h-[10rem]">
        <SelectGroup>
          <SelectLabel>Fruits</SelectLabel>
          <SelectItem value="apple">Apple</SelectItem>
          <SelectItem value="banana">Banana</SelectItem>
          <SelectItem value="blueberry">Blueberry</SelectItem>
          <SelectItem value="grapes">Grapes</SelectItem>
          <SelectItem value="pineapple">Pineapple</SelectItem>
        </SelectGroup>
</SelectContent>

This works but there is not scrollbar to indicate that it is scrollable.

[danimydev]

Hi @DaQMinh, as @neilk17 suggested, you can make your SelectContent scrollable by passing overflow-y-auto and max-h-[YOUR_CHOICE] classes. Like this:

<SelectContent className="overflow-y-auto max-h-[10rem]">
        <SelectGroup>
          <SelectLabel>Fruits</SelectLabel>
          <SelectItem value="apple">Apple</SelectItem>
          <SelectItem value="banana">Banana</SelectItem>
          <SelectItem value="blueberry">Blueberry</SelectItem>
          <SelectItem value="grapes">Grapes</SelectItem>
          <SelectItem value="pineapple">Pineapple</SelectItem>
        </SelectGroup>
</SelectContent>

This works but there is not scrollbar to indicate that it is scrollable.

If you want to show the scrollable, put it into the <SelectGroup>

<SelectContent>
  <SelectGroup className="overflow-y-auto max-h-[10rem]">
     {...}
  </SelectGroup>
</SelectContent>

[svarup]

@diptaMVN This also occurred for me when the select was in a dialog. Changing the dialog component so DialogPrimitive.Content is wrapped in DialogOverlay instead of a sibling fixed the issue and allowed the overflow and max-h classes to work.

@jeffmerrick i face the same issue can you share the example code how you fixed it

[jeffmerrick]

@svarup In your dialog component change this:

  <DialogPortal>
    <DialogOverlay />
    <DialogPrimitive.Content 
    ...
    </DialogPrimitive.Content>
  </DialogPortal>

to this:

  <DialogPortal>
    <DialogOverlay>
      <DialogPrimitive.Content 
      ...
      </DialogPrimitive.Content>
    </DialogOverlay>
  </DialogPortal>
))

More info on it here: https://www.radix-ui.com/primitives/docs/components/dialog#scrollable-overlay

[0xtz]

The issue in the <Sheet /> component too i cant scroll .... it needs the same fix i need to open a new issue?

[Emmanuel-Xs]

how to make the scrollbar visible when the shadcnui select component is clicked on

[Scglia]

I had this issue with Select components within Sheet and solved it by doing what jeffmerrick suggested above + updating the react-select dependency to v2.1.1