Office Ui Fabric Dropdown 不会扩展到其内容

如何解决Office Ui Fabric Dropdown 不会扩展到其内容

我正在使用 SPFx 附带的 Office UI Fabric React。它的版本是 6.214.0。我有一个看起来像这样的下拉菜单：

<Dropdown placeholder={strings.Position} label="" options={positionoptions} onChange={(e,option) => setPosition(option.text)} styles = {dropdownStyles} className={styles.dropDown}/>

styles.dropDown 有以下样式：

.dropDown{
  float: left; 
  margin-right: 15px; 
}

这些值是基于 Web 服务动态填充的。但是下拉宽度不适合里面的项目。

如果我移除左边的浮动，它们都将占据宽度的 100%。

我们如何使用 UI Fabric React 实现这一目标？

解决方法

标注宽度可以通过向页面添加类来覆盖。自动宽度确保标注宽度由其内容决定。

.ms-Callout {
    width: auto;
    min-width: 150px;
}

,

我建议使用 styles 道具。您可以为组件的 root 以及输出的各个方面设置样式，例如标注、dropdownItem、label 等。许多 Fluent UI/office-ui-fabric-react 组件都有这个 styles 属性 - 它们为您提供明确定义的元素，您可以覆盖其样式设置。

您的 float 实际上可能导致了这个问题。浮动将元素从正常的渲染流程中取出 - 并且可能会破坏 Dropdown 组件根据其子项的宽度调整其标注大小的能力。您可以了解浮动在 MDN Web Docs 上的实际作用。

首先，我建议删除您的 float: left 语句，看看是否有所改善。如果这不起作用，我会尝试将 minWidth 应用于 styles 道具中的可用键之一 - 可能是 dropdownItem 元素。