When I opt not to utilize Row and Col:
<FormGroup>
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>
Client's Email Address
</InputGroupText>
</InputGroupAddon>
<Input
type="email"
id="email"
name="email"
value={this.state.email}
onChange={this.onChange}
required
disabled={
this.state.isClientInformationFieldsDisabled
}
/>
<InputGroupAddon addonType="append">
<InputGroupText>
<i className="fa fa-asterisk"></i>
</InputGroupText>
<Button
color="secondary"
onClick={this.onClearClientFields}
disabled={
this.state.isClientClearFieldsButtonDisabled
}
>
X
</Button>
</InputGroupAddon>
<Button
color="primary"
onClick={this.onValidateEmailClient}
disabled={
this.state.isEmailValidateButtonDisabled
}
style={{ fontWeight: "bold" }}
>
Validate Email Address
</Button>
</InputGroup>
</FormGroup>
https://i.sstatic.net/dLzPY.png
When I make use of Row and Col:
<FormGroup>
<InputGroup>
<Row>
<Col lg={"12"}>
<InputGroupAddon addonType="prepend">
<InputGroupText>
Client's Email Address
</InputGroupText>
</InputGroupAddon>
<Input
type="email"
id="email"
name="email"
value={this.state.email}
onChange={this.onChange}
required
disabled={
this.state.isClientInformationFieldsDisabled
}
/>
<InputGroupAddon addonType="append">
<InputGroupText>
<i className="fa fa-asterisk"></i>
</InputGroupText>
<Button
color="secondary"
onClick={this.onClearClientFields}
disabled={
this.state
.isClientClearFieldsButtonDisabled
}
>
X
</Button>
</InputGroupAddon>
<Button
color="primary"
onClick={this.onValidateEmailClient}
disabled={
this.state.isEmailValidateButtonDisabled
}
style={{ fontWeight: "bold" }}
>
Validate Email Address
</Button>
</Col>
</Row>
</InputGroup>
</FormGroup>
The issue arises when I attempt to regulate the width of form elements by employing both Col and the lg,md properties. Initially, I suspected that using Row and Col might disrupt the layout of the FormGroup. Therefore, I provided it with maximum width to observe the behavior as displayed in the result above.
I fail to comprehend why the elements stack on top of each other despite the entire Form remaining at a maximum width of 12. Consequently, there should be no alteration in the layout structure.
This predicament surfaced when I endeavored to introduce an additional button into the Form, causing a cluttered appearance. Subsequently, I resorted to utilizing the Row and Col components to maintain precise control over each element within the Form.
Consequently, the outcome turned out as depicted.
Can anyone elucidate this observed behavior?
EDIT 1: I tried implementing the solution proposed by Dimitar Spassov with another input group:
<FormGroup>
<Container fluid={true}>
<Row>
<Col md={"2"} >
<InputGroup >
<InputGroupAddon addonType="prepend">
<InputGroupText>
Phone Number
</InputGroupText>
</InputGroupAddon>
</InputGroup>
</Col>
<Col md={"9"}>
<InputGroup>
<IntlTelInput
containerClassName="intl-tel-input"
inputClassName="form-control"
style={{ width: "100%" }}
block
/>
</InputGroup>
</Col>
<Col md={"1"}>
<InputGroup style={{ height: "100%" }}>
<InputGroupAddon
// style={{ height: "100%" }}
addonType="append"
>
<InputGroupText
// style={{ height: "100%" }}
>
<i className="fa fa-asterisk"></i>
</InputGroupText>
</InputGroupAddon>
</InputGroup>
</Col>
</Row>
</Container>
</FormGroup>
https://i.sstatic.net/jp4i0.png
Now, the current concern revolves around the presence of padding between distinct input groups within the phone number form. My aim is to replicate the format similar to the one exhibited in the form underneath it. So far, I haven't discovered an effective method to navigate this obstacle.
fluid={true}
Hence, inserted the aforementioned segment to eliminate the external padding of the Container (as explained here). Much to my dismay, this adjustment delivered no discernible change. Even after consulting the documentation for InputGroup to understand how to eradicate the extraneous paddings yielded no beneficial results.
To address this dilemma, I made attempts to leverage Bootstrap utility classes aiming to obliterate any default margins or padding, yet regrettably, these efforts proved futile:
<InputGroup className="ml-0 mr-0 pl-0 pr-0">
<InputGroupAddon addonType="prepend">
<InputGroupText>
Phone Number
</InputGroupText>
</InputGroupAddon>
</InputGroup>