Shadcn 选择在页面底部创建不必要的空白

Question

根据我放置选择组件或任何使用弹出器的组件的位置，它会在页面底部创建不必要的空白。选择位于具有自定义溢出 y 设置的 div 中，我希望选择弹出窗口可以使用该 div 组件滚动。很难用文字描述，所以我也会发布一张图片。 下拉前 下拉后 如何让带有自定义滚动条的 div 向下弹出，而不仅仅是一般页面？

我尝试更改选择组件本身的样式以及最大高度，尽管这确实有效，但我不喜欢弹出窗口的外观，因为它太小了。

这是我正在使用的选择组件，表单中有多个组件，它们的功能都相对相同：

     <FormField
        control={form.control}
        name="startTimeHour"
        render={({ field }) => (
          <FormItem>
            <FormLabel>Start Hour</FormLabel>
            <Select onValueChange={field.onChange}>
              <FormControl>
                <SelectTrigger>
                  <SelectValue
                    placeholder={event ? dateObj.startHour : "01"}
                  />
                </SelectTrigger>
              </FormControl>
              <SelectContent className="bg-white overflow-y-auto">
                {hourArray.map((hour) => {
                  return (
                    <SelectItem key={hour} value={hour}>
                      {hour}
                    </SelectItem>
                  );
                })}
              </SelectContent>
            </Select>
            <FormMessage />
          </FormItem>
        )}
      />

这是它所影响的 div 的样式：

.common-container {
@apply flex flex-col flex-1 items-center gap-10 overflow-y-scroll py-10 px-5 md:px-8 lg:p-14 custom-scrollbar;

}

此问题仅在页面充满元素时发生，因此如果您仅使用这些选择之一进行测试，您可能不会注意到任何事情。我有一个粘在页面底部的底部栏，当您一直向下滚动时，底部栏下方只有额外的空白，我需要调整底部栏以粘在该空白下方或用于 div 的内容当选择组件下拉时展开。

Answer 1

将表单包装在 className="relative" 的 div 中。 Radix 具有绝对定位的元素，与溢出一起使用时会导致布局问题。

对我来说，我必须将

sr-only

更改为

fixed sr-only

，并且必须将

<form>{children}</form>

包装在一个带有相关内容的 div 中。

<form><div className="relative">{children}</div></form>