Has anyone else encountered a bug where an input group addon or dropdown is taking up half of the width instead of 100%? It seems that in Reactstrp docs, this behavior is not expected.
I want my input group to occupy the full width like the rest of the elements. Check out the Reactstrp documentation here
This is the current setup:
https://i.sstatic.net/RylWJ.png
If I inspect the element:
https://i.sstatic.net/Pyb9V.png
https://i.sstatic.net/KogFs.png
You can observe that the InputGroupButton does not have proper padding or margin settings as expected to handle this issue.
Here's a snippet of the React render for the password field:
render() {
return (
<Label className="password">
<InputGroup>
<Input
className="password__input"
placeholder="Password"
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 rendering that triggers it (used in "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}>Create an Account</ModalHeader>
<ModalBody>
Please provide the information below to create your account
<InputGroup>
<Input placeholder="Username" />
</InputGroup>
<InputGroup>
<Input placeholder="Email" />
</InputGroup>
<InputGroup>
<ShowPassword />
</InputGroup>
<InputGroup>
<Input placeholder="Confirm Password"/>
</InputGroup>
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={this.toggle}>Submit</Button>{' '}
<Button color="secondary" onClick={this.toggle}>Cancel</Button>
</ModalFooter>
</Modal>
</div>
);
}