Используйте Bootstrap prepend с помощью response-select

Я пытаюсь использовать Bootstrap input-group-prepend с response-select, однако стиль response-selects, похоже, не является текущим bootstrap / reactstrap и поэтому не хочет работать вместе.

Поле выбора не сливается с добавляемым элементом (радиус 4 пикселя по всем углам, а не только по правым углам), также тень блока на элементе полностью отличается от того, что использует bootstrap 4, это создает раздражающую проблему согласованности.

Это дает желаемый вид и остается неизменным при использовании .map для параметров.

  <InputGroup className="mb-3">
     <InputGroupAddon addonType="prepend">
        <InputGroupText><FaBriefcaseMedical /></InputGroupText>
     </InputGroupAddon>
     <Input type="select" name="select" id="ConsultantSelect">
        <option value="" value disabled selected>Select Consultant</option>
        <option>Roland Deschain</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
     </Input>
  </InputGroup>

Однако это использование реакции-выбора не отображается так, как ожидалось / желательно

<InputGroup className="mb-3">
  <InputGroupAddon addonType="prepend">
      <InputGroupText><FaHSquare /></InputGroupText>
  </InputGroupAddon>
  <Select
    options={this.state.hospitals}
    name={this.state.hospitals}
  />                                            
</div>

введите здесь описание изображения

Иконография важна для того, что я делаю, из-за целевой аудитории. РЕДАКТИРОВАТЬ:

дурацкая работа - дать response-select className="form-control", а затем стилизовать его в соответствии с Bootstrap4.

<InputGroup className="mb-3">
  <InputGroupAddon addonType="prepend">
     <InputGroupText><FaHSquare /></InputGroupText>
  </InputGroupAddon>
  <Select className="form-control"
    options={this.state.hospitals}
    name={this.state.hospitals}
  />                                            
</InputGroup>

.css-2b097c-container {
    padding: 0px;
}

.css-yk16xz-control {
    background-color: #ffffff00 !important;
    border-style: none !important;
}

.css-1pahdxg-control {
    border-color: #80bdff !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

Но это явно не идеальное решение.

Результат изменений CCS приведен ниже, в котором раскрывающийся список теперь выглядит так же, как обычный ввод выбора, а также совпадает с другими входами, такими как текстовые поля.

введите здесь описание изображения


reactjs react-select bootstrap-4 reactstrap
person Vereonix    schedule 26.02.2020    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Что сработало для меня, так это обернуть Select в div с классом form-control. Он также нуждается в нулевом заполнении.

<div className="react-select form-control p-0">
    <Select />
</div>

Первый div внутри Select также требует поля -1px.

.react-select > div {
    margin: -1px;
}
person Pero93    schedule 23.02.2021

arrow_upward
0
arrow_downward

У меня такой же вариант использования, как и у вас. Только я обернул Select в div с определенным стилем% width.

Однако это должно быть установлено для размера экрана. Это приведет к смещению правой стороны, если% слишком мал, или создаст новую строку, если% слишком велик.

<InputGroup className='mt-1'>
  <InputGroupAddon addonType="prepend">
    <InputGroupText>Select</InputGroupText>
  </InputGroupAddon>
  <div style={{width: '80%'}}>
    <Select isMulti name='subjects'
      options={optionsArray}
      placeholder="Click or type"
    />
  </div>
</InputGroup>
person Brett S    schedule 31.03.2020