material-ui [选择] 不对齐的下拉菜单

noj0wjuj  于 6个月前  发布在  其他
关注(0)|答案(9)|浏览(64)

重复问题

  • 我搜索了现有的问题

最新版本

  • 我测试了最新版本

重现步骤 🕹

链接到实时示例:
https://mui.com/material-ui/react-select/#basic-select
https://codesandbox.io/s/bug-missaligned-slect-dropdown-ubflw6?file=/demo.tsx (仅将minWidth更改为width)
在Firefox和Edge(Chromium)中进行测试

当前行为 😯

下拉菜单的位置与选择不对齐。

预期行为 🤔

下拉菜单应该与输入对齐。在示例中,它向左移动了8像素

上下文 🔦

  • 无响应*

您的环境 🌎

  • 无响应*
guz6ccqo

guz6ccqo1#

也许将 marginThreshold 的默认大小设置为 16px 有点过多(来自 Popover 组件)。

离题,我们为 Popover 打开的大部分错误都与定位有关:component: Popover React 组件。由于 Popper 可以以更低的级别解决这个问题,因此重写 Popover 以使用 Popper 内部可能会很好。然而,这并不能解决这个问题。

kdfy810k

kdfy810k2#

Alf-Melmac,这是否是您应用程序中的真实问题,还是您只是指出我们的演示效果如何?
我之所以提出这个问题,是因为这种不对齐现象只出现在Select非常接近视口边缘时。弹出窗口将弹出窗口移到边缘以留出一些呼吸空间。我认为在现实世界的应用中,表单控件不会被放置得如此靠近边缘,因此这个问题主要与演示有关。
话虽如此,我认为无论如何减少默认的marginThreshold都是有意义的。或者当在Select中使用弹出窗口时将其设置为0。

ijxebb2r

ijxebb2r3#

在我的应用程序中,下拉菜单也移动得不正确。这是一个来自模态对话框的例子:

$x_1^c_0 d_1^x$

bprjcwpo

bprjcwpo4#

这很有趣。它可能是由代码沙箱中的问题之外的其他因素引起的(下拉菜单被移到了左侧,但弹出窗口通常希望通过将其推离边缘来增加左边距)。您是否能够在代码沙箱上隔离这个问题?

envsm3lx

envsm3lx5#

你好,我昨天发现了这个问题。我考虑了@michaldudak的建议,但发现如果你在我的案例中使用自定义的html字体大小62.5%,它会使弹出窗口稍微向右移动,但如果我删除自定义的字体大小,它看起来就会很好。我创建了这个example来测试我的假设。

cedebl8k

cedebl8k6#

我原以为我们可以从修饰符中更新它,但似乎修饰符没有被应用;它作为HTML属性在起作用。

<Select
  MenuProps={{
    modifiers: [
      {
        name: 'offset',
        enabled: true,
        options: {
          offset: [30, 50],
        },
      },
    ],
  }}
/>

我得到了以下的div输出:
<div role="presentation" id="menu-" modifiers="[object Object]" class="sc-jOhDuK euAeDJ MuiModal-root sc-iFwKgL MuiPopover-root sc-eVQfli MuiMenu-root">

hec6srdp

hec6srdp7#

@tarunsharma20 是因为没有为 Select 提供 Popper,而是使用了 Popover。

dtcbnfnu

dtcbnfnu8#

Alf-Melmac,你是否能修复这个行为?

const MenuProps: SelectProps['MenuProps'] = {
  anchorOrigin: {
    vertical: 'bottom',
    horizontal: 'center',
  },
  transformOrigin: {
    vertical: 'top',
    horizontal: 'center',
  },
  marginThreshold: 0,
};

对我有效

xkftehaa

xkftehaa9#

@stelmakhivan 谢谢你!marginThreshold 是我一直缺少的属性。
这个在 Menu API 文档中没有提到(尽管如果你仔细查看弹出框文档,你也能找到它)
https://mui.com/material-ui/api/menu/
https://mui.com/material-ui/api/popover/#popover-prop-marginThreshold

相关问题