html Radix UI“选择”原语溢出屏幕

rdlzhqv9  于 2023-08-01  发布在  其他
关注(0)|答案(1)|浏览(103)

我使用的是Radix-UI Radix Ui Select中的“选择”组件,弹出的模态在屏幕顶部溢出,请参阅所附图片。但是当我有几个选项时,它工作正常,请参阅附件imae => fine modal
选择按钮:

const SelectButton = (props: Props) => {

  function handleOnValueChange(newValue:string){
    props.onChange(newValue)
  }

  return (
    <SelectPrimitive.Root defaultValue="blueberry" onValueChange={handleOnValueChange}>

      <SelectPrimitive.Trigger asChild aria-label="Food">
        {props.children}
      </SelectPrimitive.Trigger>

      <SelectPrimitive.Content className="rounded-lg mt-4 top-5">
        <SelectPrimitive.ScrollUpButton className="flex items-center justify-center text-gray-700 dark:text-gray-300">
          <ChevronUpIcon />
        </SelectPrimitive.ScrollUpButton>
        <SelectPrimitive.Viewport className="bg-white dark:bg-black p-2 rounded-lg shadow-lg top-5">
          <SelectPrimitive.Group>
            {props.options.map(
              (f, i) => (
                <SelectPrimitive.Item
                  //disabled={f === "Grapes"}
                  key={`${f}-${i}`}
                  value={props.toLower == undefined ? f.toLowerCase() : f}
                  className={cx(
                    "relative flex items-center px-8 py-2 rounded-md text-sm text-gray-700 dark:text-gray-300 font-medium focus:bg-gray-100 dark:focus:bg-gray-900",
                    "radix-disabled:opacity-50",
                    "focus:outline-none select-none"
                  )}
                >
                  <SelectPrimitive.ItemText>{f}</SelectPrimitive.ItemText>
                  <SelectPrimitive.ItemIndicator className="absolute left-2 inline-flex items-center">
                    <CheckIcon />
                  </SelectPrimitive.ItemIndicator>
                </SelectPrimitive.Item>
              )
            )}
          </SelectPrimitive.Group>
        </SelectPrimitive.Viewport>
        <SelectPrimitive.ScrollDownButton className="flex items-center justify-center text-gray-700 dark:text-gray-300">
          <ChevronDownIcon />
        </SelectPrimitive.ScrollDownButton>
      </SelectPrimitive.Content>

    </SelectPrimitive.Root>
  );
};

export default SelectButton;

字符串

j1dl9f46

j1dl9f461#

将此css添加到SelectPrimitive。内容:

max-height: var(--radix-select-content-available-height);

字符串
但请注意,只有当<SelectPrimitive.Content position="popper" />
了解更多

相关问题