width - 如何在 Blueprintjs 中进行选择使用(或模拟)填充？或者甚至是固定宽度？

Question

我使用文档作为示例制作了一个选择控件。但是，按钮会根据所选项目的文本宽度更改其宽度。这使得控件跳来跳去，不是一个好的 UI 设计。





有没有办法指定使用 fill或者让按钮固定宽度？虽然我在设置固定宽度方面取得了部分成功，但呈现的控件很丑陋，文本和箭头都居中，如下所示:



相反，我想要的是:



这如何用 blueprintjs 创建？

因为有人会要求 SSCCE，这正是我使用的:https://blueprintjs.com/docs/#select/select-component

编辑:

我已经能够得到我想要的结果，但看起来库本身应该处理这个问题，而不是诉诸一系列 CSS 技巧。以下 CSS 更改会产生所需的输出，但我仍然希望得到更好的答案。

.selectButton,
.selectButton > span,
.selectButton > span > div,
.selectButton > span > div > button {
    width: 100%;
}

.selectButton > span > div > button {
    display: inline;
}

.selectButton span.bp3-icon-caret-down {
    float: right;
}

Answer 1

有一个github issue对这个。

全屏宽度

您应该使用 alignText属性来对齐文本和图标。前任 :

 <Select className="fullwidth" items={['toto', 'tata']} filterable={false} itemRenderer={renderSelectItem} onItemSelect={this.onCategoryChange.bind(this)} >
    <Button text={this.state.category} alignText="left" fill="{true}" rightIcon="caret-down" />
 </Select>

您必须添加自定义 CSS 规则才能选择全宽:

.bp3-popover-wrapper.fullwidth, .bp3-popover-wrapper.fullwidth > .bp3-popover-target {
   display:block;
}

然而 , 如果单击选择，列表将不会全宽显示。
如果你有一个基本的用例，你可能想使用 HTMLSelect而不是 Select ，当“fill”为真时，它具有所需的默认行为。

固定宽度

如果要使选择和列表固定宽度，您有两种解决方案:

<Select className="fullwidth" popoverProps={{ portalClassName:"fullwidth" }} items={['toto', 'tata']} filterable={false} itemRenderer={renderSelectItem} onItemSelect={this.onCategoryChange.bind(this)} >
    <Button text={this.state.category} alignText="left" fill="{true}" rightIcon="caret-down" />
</Select>

<Select className="fullwidth" popoverProps={{ usePortal: false }} items={['toto', 'tata']} filterable={false} itemRenderer={renderSelectItem} onItemSelect={this.onCategoryChange.bind(this)} >
    <Button text={this.state.category} alignText="left" fill="{true}" rightIcon="caret-down" />
</Select>

.bp3-popover-wrapper.fullwidth, .bp3-popover-wrapper.fullwidth > .bp3-popover-target {
   display:block;
   max-width: 500px;
}

/* with portal */
.bp3-overlay.fullwidth .bp3-select-popover {
   width: 500px;
}

/* without portal */
.bp3-popover-wrapper.fullwidth .bp3-select-popover {
   width: 500px;
}