代码之家 › 专栏 › 技术社区 › rahul

虚拟化select设计受到Bootstrap 4的干扰

react-virtualized bootstrap-4 reactjs

-1

rahul · 技术社区 · 7 年前

我在Bootstrap 3中使用虚拟化select,最近升级到Bootstrap 4,但在那之后,虚拟化select设计完全被打乱了。

下面我将提供相同的代码片段:

import VirtualizedSelect from 'react-virtualized-select'; 
import 'react-select/dist/react-select.css'; 
import 'react-virtualized/styles.css'; 
import 'react-virtualized-select/styles.css';

<div className="input-group customSearchBar">
                <div className="input-group-prepend"><span className="input-group-text"><i className="fa fa-search"></i></span></div>
                <VirtualizedSelect ref={objNode => this.objVirtualizedSelect = objNode} labelKey={this.state.labelKey} async={true} loadOptions={this.getOptions}
                valueKey={this.state.valueKey} disabled={this.state.disabled} clearable={this.state.clearable}
                value={this.state.selectValue} placeholder={this.state.placeholder} multi={this.state.multi}
                joinValues={this.state.joinValues} simpleValue={this.state.simpleValue} autoload={false}
                backspaceRemoves={this.state.backspaceRemoves} deleteRemoves={this.state.deleteRemoves}
                onChange={this.updateValue.bind(this)} closeOnSelect={this.state.closeOnSelect} onSelectResetsInput={this.state.onSelectResetsInput} />
                <div className="input-group-append">
                        <button className="btn btn-primary" type="button" disabled={this.state.disabled} title={this.state.multiLangMsgs.ADD_USERS_TO_GROUP} onClick={this.addUsersClick}>
                                <i className="fa fa-plus"></i>
                        </button>
                </div>
        </div>

带引导3

带引导4

我已经为同样的问题创建了一个沙盒

Virtualized Select

1 回复 | 直到 7 年前

1

0

mahan 7 年前

第一要素 VirtualizedSelect relative 那个有 Select is-clearable is-searchable Select--single 类名。它没有 width .

输入组 是一个弯曲 form-control 元素。如果你需要的话 Select

最好的方法是使用 div 具有 flex-grow-1 虚拟化选择 . 这样做会占用所有可用空间。

    <div className="flex-grow-1">
      <VirtualizedSelect options={options} />
    </div>

https://codesandbox.io/s/w0op7n5rw8

窗体控件 flex-grow-1 这是最好的解决办法。