ReactStrap input group bug (not 100% width)

Question

Does anyone have this bug where an input group addon or dropdown is taking up half of the entire width instead of a 100%. (basically the InputGroupButton is taking up the other 50% so 100% width spread automatically between two elements but in the Reactstrp docs there's every indication that this is goes against expected behavior)

I want my input group to be 100% width like the rest. https://reactstrap.github.io/components/input-group/

this is what I currently have :

and if I open Inspect Element :

you can see that the InputGroupButton isn't setting a padding or a margin like "auto" or something similar which you'd expect to be responsible for this.

here's the small snipet of react render concerning the password field :

render() {
    return (
        <Label className="password">
            <InputGroup>
                <Input
                    className="password__input"
                    placeholder="Mot de Passe"
                    type={this.state.type}
                    onChange={this.passwordStrength}
                />
                <InputGroupButton><Button onClick={this.showHide}>
                    {this.state.type === 'password' ?
                        <i className="fa fa-eye" aria-hidden="true" />
                        :
                        <i className="fa fa-eye-slash" aria-hidden="true" />
                    }</Button></InputGroupButton>
            </InputGroup>
            <span
                className="password__strength"
                data-score={this.state.score}
            />
        </Label>
    );
}

and here's the render that calls it (it's called at "ShowPassword") :

render() {
    return (
        <div>
            <Button color="info" onClick={this.toggle}>{this.props.buttonLabel}</Button>
            <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
                <ModalHeader toggle={this.toggle}>Créer un compte</ModalHeader>
                <ModalBody>
                    Veuillez renseigner les champs ci-dessous afin de créer votre compte
                    <InputGroup>
                        <Input placeholder="Nom d'utilisateur" />
                    </InputGroup>
                    <InputGroup>
                        <Input placeholder="E-mail" />
                    </InputGroup>
                    <InputGroup>
                        <ShowPassword />
                    </InputGroup>
                    <InputGroup>
                        <Input placeholder="Confirmer"/>
                    </InputGroup>
                </ModalBody>
                <ModalFooter>
                    <Button color="primary" onClick={this.toggle}>Envoyer</Button>{' '}
                    <Button color="secondary" onClick={this.toggle}>Annuler</Button>
                </ModalFooter>
            </Modal>
        </div>
    );
}

if you can reflect this issue on jsFiddle that would be very helpful to answer — Tripurari Shankar
– Tripurari Shankar, Commented Aug 18, 2017 at 13:24

Tharaka Wijebandara · Accepted Answer · 2017-08-18 16:54:52Z

This is not a bug. You are using reactstrap an unintended manner. reactstrap is based on Bootstrap CSS Library. Bootstrap expects you to structure your elements and CSS classes in a certain way it describes in the documentation. If we don't follow them, we can't get the expected result.

As an example, Bootstrap only expects certain elements like Input, InputGroupButton and InputGroupAddon inside the InputGroup. But in your case, if we replace ShowPassword with its actual JSX structure, you will have a Label inside InputGroup and another InputGroup inside the Label. What is why it is not rendered as expected.

First, to wrap your ShowPassword, you should use a div instead of a Label.

render() {
  return (
    <div className="password">
      <InputGroup>
        <Input
          className="password__input"
          placeholder="Mot de Passe"
          type={this.state.type}
          onChange={this.passwordStrength}
        />
        <InputGroupButton>
          <Button onClick={this.showHide}>
            {this.state.type === "password"
              ? <i className="fa fa-eye" aria-hidden="true" />
              : <i className="fa fa-eye-slash" aria-hidden="true" />}
          </Button>
        </InputGroupButton>
      </InputGroup>
      <span className="password__strength" data-score={this.state.score} />
    </div>
  );
}

and then you should remove additional InputGroup which wrap your ShowPassword component.

render() {
  return (
    <div>
      <Button color="info" onClick={this.toggle}>
        {this.props.buttonLabel}
      </Button>
      <Modal
        isOpen={this.state.modal}
        toggle={this.toggle}
        className={this.props.className}
      >
        <ModalHeader toggle={this.toggle}>Créer un compte</ModalHeader>
        <ModalBody>
          Veuillez renseigner les champs ci-dessous afin de créer votre compte
          <InputGroup>
            <Input placeholder="Nom d'utilisateur" />
          </InputGroup>
          <InputGroup>
            <Input placeholder="E-mail" />
          </InputGroup>
          <ShowPassword />
          <InputGroup>
            <Input placeholder="Confirmer" />
          </InputGroup>
        </ModalBody>
        <ModalFooter>
          <Button color="primary" onClick={this.toggle}>
            Envoyer
          </Button>{" "}
          <Button color="secondary" onClick={this.toggle}>
            Annuler
          </Button>
        </ModalFooter>
      </Modal>
    </div>
  );
}

Hopefully, now you will get the expected the result.

well that makes me feel dumb :P why didn't it jump out at me that I'm wrapping the thing twice?? thanks man

Collectives™ on Stack Overflow

ReactStrap input group bug (not 100% width)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related