I've been trying to enhance a login page with checkboxes by implementing code from react-bootstrap.github.io
The issue I'm facing is that the checkboxes are overlapping their corresponding labels.
Below is the snippet from my register.js file:
import React, { useState } from 'react'
import { Link } from 'react-router-dom';
import { request } from './services/Request';
import { Button, FormGroup, FormControl, FormLabel, FormCheck } from 'react-bootstrap';
//import { FormRow } from 'react-bootstrap/Form';
import "./Styles/register.css"
export const Register = () => {
return (
<div style={{display: "flex", justifyContent: "center"}}>
<h1> Register </h1>
<div className="Register">
<form onSubmit={handleSubmit}>
</FormGroup>
<FormGroup controlId="email" bsSize="large">
<FormLabel>Email</FormLabel>
<FormControl
required
autoFocus
type="email"
//value={email}
onChange={ onChangeHandlerFn }
/>
</FormGroup>
<FormGroup controlId="password" bsSize="large">
<FormLabel>Password</FormLabel>
<FormControl
required
autoFocus
type="password"
//value={password}
onChange={ onChangeHandlerFn }
/>
</FormGroup>
<FormGroup controlId="password" bsSize="large">
{['checkbox'].map((type) => (
<div key={`default-${type}`} className="mb-3">
<FormCheck
type={type}
id={`default-${type}`}
label={`I am an individual`}
/>
</div>
))}
<Button variant="primary" type="submit" block>Register</Button>
<span>
Have an account?
<a href="/login"> Sign in</a>
</span>
<ul>
<li><Link to="/privacy">Privacy & Terms</Link></li>
</ul>
</form>
</div>
</div>
);
};
The problem persists as the checkboxes overlap their respective labels:
https://i.sstatic.net/up381.png
Sharing my CSS below:
@media all and (min-width: 480px) {
.Register {
padding: 60px 0;
}
.Register form {
margin: 0 auto;
max-width: 320px;
}
}
ul {
list-style-type: none !important;
margin: 0;
padding: 0;
overflow: hidden;
}
Most of the code is functional; I've omitted some for brevity. Any assistance is highly appreciated.