Reactionstrap: как сделать так, чтобы размер меню dropDown заполнял все доступное пространство - PullRequest
Новая
       8

Reactionstrap: как сделать так, чтобы размер меню dropDown заполнял все доступное пространство

0 голосов
/ 13 февраля 2020

Я использую реагирующий ремень выпадающий компонент следующим образом: 

              <Dropdown 
                isOpen={this.state.dropdownOpen[3]}
                toggle={() => {
                  this.toggle(3);
                }}
                className="mb-10" 
              >

                <DropdownToggle caret> {this.state.dropDownValue}</DropdownToggle>
                <DropdownMenu>
                  <DropdownItem >  <div onClick={this.changeValue}>operateur_sav</div></DropdownItem>
                  <DropdownItem >  <div onClick={this.changeValue}>agent_support_tel</div></DropdownItem>
                  <DropdownItem >  <div onClick={this.changeValue}>agent_magasin</div></DropdownItem>
                </DropdownMenu>
              </Dropdown>

, который дает следующий результат:
enter image description here

Это весь код формы: 

 <Form noValidate onSubmit={this.onSubmit}>
          <FormGroup>
            <InputGroup>
              <InputGroupAddon addonType="prepend">
                <InputGroupText>Nom</InputGroupText>
              </InputGroupAddon>
              <Input
                type="text"
                id="nom"
                name="nom"
                value={this.state.nom}
                onChange={this.onChange}
              />
              <InputGroupAddon addonType="append">
                <InputGroupText>
                  <i className="fa fa-user"></i>
                </InputGroupText>
              </InputGroupAddon>
            </InputGroup>
          </FormGroup>
          <FormGroup>
            <InputGroup>
              <InputGroupAddon addonType="prepend">
                <InputGroupText>Email</InputGroupText>
              </InputGroupAddon>
              <Input
                type="email"
                id="email"
                name="email"
                value={this.state.email}
                onChange={this.onChange}
              />
              <InputGroupAddon addonType="append">
                <InputGroupText>
                  <i className="fa fa-envelope"></i>
                </InputGroupText>
              </InputGroupAddon>
            </InputGroup>
          </FormGroup>
          <FormGroup>
            <InputGroup>
              <InputGroupAddon addonType="prepend">
                <InputGroupText>Role</InputGroupText>
              </InputGroupAddon>
              <Dropdown
                isOpen={this.state.dropdownOpen[3]}
                toggle={() => {
                  this.toggle(3);
                }}
                className="mb-10"
              >
                <DropdownToggle caret>
                  {" "}
                  {this.state.dropDownValue}
                </DropdownToggle>
                <DropdownMenu>
                  <DropdownItem>
                    {" "}
                    <div onClick={this.changeValue}>operateur_sav</div>
                  </DropdownItem>
                  <DropdownItem>
                    {" "}
                    <div onClick={this.changeValue}>agent_support_tel</div>
                  </DropdownItem>
                  <DropdownItem>
                    {" "}
                    <div onClick={this.changeValue}>agent_magasin</div>
                  </DropdownItem>
                </DropdownMenu>
              </Dropdown>
              <InputGroupAddon addonType="append">
                <InputGroupText>
                  <i className="fa fa-id-badge "></i>
                </InputGroupText>
              </InputGroupAddon>
            </InputGroup>
          </FormGroup>
          <FormGroup>
            <InputGroup>
              <InputGroupAddon addonType="prepend">
                <InputGroupText>Mot de passe</InputGroupText>
              </InputGroupAddon>
              <Input
                type="password"
                id="mot_de_passe"
                name="mot_de_passe"
                value={this.state.mot_de_passe}
                onChange={this.onChange}
              />
              <InputGroupAddon addonType="append">
                <InputGroupText>
                  <i className="fa fa-asterisk"></i>
                </InputGroupText>
              </InputGroupAddon>
            </InputGroup>
          </FormGroup>
          <FormGroup className="form-actions">
            <Button type="submit" size="sm" color="primary">
              Créer
            </Button>
          </FormGroup>
        </Form>

Я искал способы, чтобы dropDown меню 'роль' занимал тот же размер, что и другие элементы ввода так что ширина всех строк формы будет одинаковой.
Мои исследования привели меня к 2 решениям , ни одно из которых не сработало:
РЕШЕНИЕ 1: **
Поскольку в реагирующем ремне: DropdownToggle использует компонент Button внутри, то есть он также принимает все реквизиты, которые принимает компонент Button. , я мог бы использовать ** size и блок как в элементах кнопки: 

  <Button color="primary" size="lg" block>Block level button</Button>

, который выглядит так:
enter image description here

Итак, я добавил: 

size="lg" block

к элементу Dropdown, но все, что он сделал, это немного увеличил размер меню dropDown.
Решение 2:
Я попытался o обернуть внутреннюю часть a оправданной опорой: 

<ButtonGroup justified>
  <DropdownButton>...</DropdownButton>
</ButtonGroup>

Это не имело никакого значения.
Также использование: 

 width: 100%;

ничего не изменило?
Любое идея как это решить?

1 Ответ

1 голос
/ 13 февраля 2020

Вот рабочий код для вашего случая - https://codesandbox.io/s/gracious-payne-b1rv4

Была пара вещей, которые были не правы -

  1. dropdownOpen - это должно быть установлен на логическое значение, но ему присваивается некоторый массив.
  2. className - это имя, а не стиль.

Присвойте элемент className элементу DropdownToggle и добавьте к нему width: 100% className, тогда ваш выпадающий список сможет занять всю ширину.

...