[英]Office Ui Fabric Dropdown doesn't expand to its content
I am using Office UI Fabric React that comes with SPFx.我正在使用 SPFx 附带的 Office UI Fabric React。 It's version 6.214.0.
它的版本是 6.214.0。 I have a dropdown that looks like this:
我有一个如下所示的下拉列表:
<Dropdown placeholder={strings.Position} label="" options={positionOptions} onChange={(e, option) => setPosition(option.text)} styles = {dropdownStyles} className={styles.dropDown}/>
The styles.dropDown has the following styles: styles.dropDown 有以下 styles:
.dropDown{
float: left;
margin-right: 15px;
}
The values are filled dynamically based on a web service.这些值是根据 web 服务动态填充的。 However the dropdown width doesn't fit the items inside.
但是下拉宽度不适合里面的项目。
If I remove the float left, all of them will take 100% of the width.如果我删除左边的浮动,它们都将占用 100% 的宽度。
How do we achieve this with UI Fabric React?我们如何使用 UI Fabric React 实现这一点?
The callout width can be over-written by adding a class to the page.标注宽度可以通过向页面添加 class 来覆盖。 Auto width ensures the callout width will be determined by its contents.
自动宽度确保标注宽度将由其内容确定。
.ms-Callout {
width: auto;
min-width: 150px;
}
I would recommend using the styles
prop.我建议使用
styles
道具。 You can style the root
of the component as well as individual aspects of the output like the callout, the dropdownItem
, the label
and more.您可以为组件的
root
以及 output 的各个方面设置样式,例如标注、 dropdownItem
、 label
等。 A lot of Fluent UI / office-ui-fabric-react components have this styles
prop - they give you clearly defined elements that you can override style settings for.许多 Fluent UI / office-ui-fabric-react 组件都有这个
styles
- 它们为您提供了可以覆盖样式设置的明确定义的元素。
Your float
may actually be contributing to this issue.您的
float
实际上可能导致了这个问题。 A float takes an element out of the normal flow of rendering - and might be screwing with the Dropdown component's ability to size its callout based on the widths of its children.浮动将元素从正常的渲染流程中取出 - 并且可能会破坏 Dropdown 组件根据其子项的宽度调整其标注大小的能力。 You can read about what float actually does on the MDN Web Docs .
您可以在MDN Web Docs上了解 float 的实际作用。
In the first instance I would suggest removing your float: left
statement and seeing if that improves things.在第一种情况下,我建议删除您的
float: left
语句,看看是否可以改善情况。 If that doesn't work I would try applying a minWidth
to one of the available keys in the styles
prop - perhaps the dropdownItem
element.如果这不起作用,我会尝试将
minWidth
应用于styles
道具中的可用键之一 - 也许是dropdownItem
元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.