Overflow Issue with Radio Group Item

[SDBurt]

trafficstars

I have a strange issue regarding overflow and radio groups. I have been working to fix a bug for the last few hours and cannot seem to figure out why h-screen overflow-y-auto still shows a space below the body and has a scrollbar when it shouldn't.

The right scroll bar should not exist and from the background color shown in the image, something is overflowing. I narrowed it down to the RadioGroupItem component.

The code for this section is:

<form className="flex flex-col space-y-4">
    <Label>Style</Label>
    <RadioGroup
      defaultValue={theme.backgroundStyle}
      value={theme.backgroundStyle}
      onValueChange={styleChangedHandler}
    >
      {options.background.style.map((option) => (
        <div key={option.name} className="flex items-center space-x-2">
          <RadioGroupItem value={option.name} id={option.name} />
          <Label htmlFor={option.name}>{option.label}</Label>
        </div>
      ))}
    </RadioGroup>

removing <RadioGroupItem value={option.name} id={option.name} /> fixes the issue. I have played around with the tailwind a bunch in all areas without luck. I might remove this code and replace it with selectable cards instead, but I felt I should bring this to others attention in case they run into the same issue.

[dan5py]

Can you provide an short example where the error occurs?

[Palmik]

I had the same issue with RadioGroup and Select. For RadioGroup, apply className="relative", for Select, wrap it in a div with className="relative".

[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.