input fields overlapping in layout - html

Question

I wanted to create a form with text field, age, country and gender. however there seems to be a problem. The age and gender field seems to be overlapping on each other. How do I make every input field be in it's own row instead of overlapping
codesandbox, the problem seems to be there only when you open the website in full
import React, { Fragment, useState } from "react";
import { Container, Row, Col, Form } from "react-bootstrap";
import {
CountryDropdown,
RegionDropdown,
CountryRegionData
} from "react-country-region-selector";
const App = () => {
const [age, setAge] = useState("");
const [gender, setGender] = useState("");
const [country, setCountry] = useState("");
const [text, setText] = useState("");
const handleSubmit = async () => {
console.log(age, gender, country, text);
};
return (
<Fragment>
<Container>
<Row md={4}>
<Col xs={12} md={7}>
<Form.Group controlId="textarea">
<Form.Label />
<Form.Control
as="textarea"
rows="20"
onChange={e => setText(e.target.value)}
placeholder="Enter you text"
/>
</Form.Group>
</Col>
<Col xs={12} md={5}>
<Form className="mb-3">
<Form.Row>
<Form.Group as={Row}>
<Form.Label>
Age
<Form.Control
type="text"
name="age"
value={age}
onChange={e => setAge(e.target.value)}
required
/>
</Form.Label>
</Form.Group>
<br />
<Form.Group controlId="exampleForm.SelectCustomSizeSm" as={Row}>
<Form.Label>Gender</Form.Label>
<Form.Control
as="select"
size="sm"
custom
value={gender}
onChange={e => setGender(e.target.value)}
>
<option>Male</option>
<option>Female</option>
<option>Prefer Not To Say</option>
</Form.Control>
</Form.Group>
<Form.Group>
<Form.Label>
Country
<CountryDropdown
value={country}
onChange={e => setCountry(e)}
/>
</Form.Label>
</Form.Group>
</Form.Row>
</Form>
<Form.Group as={Col}>
<input
type="submit"
className="btn btn-dark my-1"
value="Submit"
onClick={handleSubmit}
/>
</Form.Group>
</Col>
</Row>
</Container>
</Fragment>
);
};
export default App;

Answer 1

You need to first remove the as={Row} attributes from both the Age and Gender form group as its not the use case for what you are trying to achieve. The <Form.Label> of the age form group component is not used properly.
After making those changes it worked fine. Here is a snippet
import React, { Fragment, useState } from "react";
import { Container, Row, Col, Form } from "react-bootstrap";
import {
CountryDropdown,
RegionDropdown,
CountryRegionData
} from "react-country-region-selector";
const App = () => {
const [age, setAge] = useState("");
const [gender, setGender] = useState("");
const [country, setCountry] = useState("");
const [text, setText] = useState("");
const handleSubmit = async () => {
console.log(age, gender, country, text);
};
return (
<Fragment>
<Container>
<Row md={4}>
<Col xs={12} md={7}>
<Form.Group controlId="textarea">
<Form.Label />
<Form.Control
as="textarea"
rows="20"
onChange={e => setText(e.target.value)}
placeholder="Enter you text"
/>
</Form.Group>
</Col>
<Col xs={12} md={5}>
<Form className="mb-3">
<Form.Row>
<Form.Group>
<Form.Label>
Age
</Form.Label>
<Form.Control
type="text"
name="age"
value={age}
onChange={e => setAge(e.target.value)}
required
/>
</Form.Group>
<br />
<Form.Group controlId="exampleForm.SelectCustomSizeSm">
<Form.Label>Gender</Form.Label>
<Form.Control
as="select"
size="sm"
custom
value={gender}
onChange={e => setGender(e.target.value)}
>
<option>Male</option>
<option>Female</option>
<option>Prefer Not To Say</option>
</Form.Control>
</Form.Group>
<Form.Group>
<Form.Label>
Country
<CountryDropdown
value={country}
onChange={e => setCountry(e)}
/>
</Form.Label>
</Form.Group>
</Form.Row>
</Form>
<Form.Group as={Col}>
<input
type="submit"
className="btn btn-dark my-1"
value="Submit"
onClick={handleSubmit}
/>
</Form.Group>
</Col>
</Row>
</Container>
</Fragment>
);
};
export default App;

Answer 2

The easiest solution is to remove as={Row} from <Form.Group as={Row}>.
<Container>
<Row md={4}>
<Col xs={12} md={7}>
{/* ... */}
</Col>
<Col xs={12} md={5}>
<Form className="mb-3">
<Form.Row>
{/* <Form.Group as={Row}> */}
<Form.Group>
<Form.Label>
Age
<Form.Control type="text" name="age" required />
</Form.Label>
</Form.Group>
<br />
{/* <Form.Group controlId="exampleForm.SelectCustomSizeSm" as={Row}> */}
<Form.Group controlId="exampleForm.SelectCustomSizeSm">
<Form.Label>Gender</Form.Label>
<Form.Control as="select" size="sm" custom>
<option>Male</option>
<option>Female</option>
<option>Prefer Not To Say</option>
</Form.Control>
</Form.Group>
<Form.Group>{/* ... */}</Form.Group>
</Form.Row>
</Form>
<Form.Group as={Col}>{/* ... */}</Form.Group>
</Col>
</Row>
</Container>
Alternatively, you can remove <Form.Row /> entirely. The solution you choose depends on the layout you expect.