Checkbox label covering checkbox

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.

Answer №1

Have you considered increasing the left padding of the label to ensure it is positioned correctly next to the checkbox?

label {
  padding-left:15px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are the steps to shift columns to the left within a table?

I need to adjust the alignment of the columns and also create a fixed size space between them. Currently, it appears like this: https://i.sstatic.net/F7Rqk.png My desired outcome is something similar to: https://i.sstatic.net/ALKa9.png CSS Code: .tabl ...

Embed an audio file onto a webpage

Is there a way to add an audio file to my website if I only have the .mp3 version and not the .ogg one? When I try to play the audio, it doesn't work. Can someone help me with this issue? Here is the code I am currently using: <audio controls auto ...

How can a single value from one table be allocated to multiple values in another table?

There are 3 distinct tables that I am working with: process table: | projectNo | process | studio | +-----------+---------+--------+ | 170001 | ANM BLD | APEX | | 170001 | ANM BLD | CANVAS | | 170002 | CGI MOD | APEX | | 170003 | CGI MOD | ...

CSS Styled Product Index

Currently, I am working on creating a product catalog using React and CSS. Everything is going smoothly except for the last row of products. The issue with the last row is that it only contains 1 element, and due to the flex-grow: 1 setting, it ends up ta ...

javascript with python

Currently, I'm in the process of parsing a html page. I've experimented with spynner, selenium, and mechanize, however none of them have been effective when dealing with JavaScript in this particular scenario. Is there anyone who can provide som ...

Aligning two divs both horizontally and vertically within two adjacent columns each with a width of 50%

Struggling to align two divs both vertically and horizontally within their respective parent containers that are placed side by side with 50% width and 100% height? Check out my solution on Codepen for reference. View Codepen Example *** HTML *** <di ...

State not properly updating in the most recent version of Next.js

"use client"; import { useState , useEffect } from "react"; import React from 'react' function form() { const [name, setName] = useState(""); const [email, setEmail] = useState(""); const [disable, ...

Switching colors after uncovering text using JavaScript

I'm striving to achieve specific results with my code, but I'm having trouble pinpointing what exactly I'm doing wrong. Any guidance on how to correct my approach would be greatly appreciated. Currently, I've created rows that can be c ...

What could be causing certain grid items to display in a disorderly manner?

Currently, I am working on a CSS grid layout that resembles the one showcased in this demo. The challenge I'm facing is related to the ordering of items within the grid. Specifically, every 6th and 7th item seem to be out of order and I would like the ...

Monitoring WooCommerce order submissions through AJAX

I'm exploring the world of Ajax for the first time. My goal is to submit an order tracking form and show the results using AJAX. I attempted to use Ajax to display the results within div track_result. The issue I'm facing is that the following ...

Ensure that the default value in the text box remains unchanged until new text is input by utilizing jQuery

Can you please review my code snippet on http://jsfiddle.net/7995m/? The issue I'm facing is that the default text in the text box disappears as soon as it's clicked. What I want is for the default text to remain until the user starts typing. Her ...

Heroku deployment unable to refresh node modules after git push

Can someone assist me with a problem I'm encountering while trying to deploy my project on Heroku? The issue revolves around my utilization of "react-animations" and the customization I've applied to a particular animation within the library. Ess ...

The compatibility issues with the textarea and text-indent: placeholder feature on EDGE are causing functionality problems

I'm facing a peculiar problem with placeholders when using the Edge browser. In my current project, I need to implement a textarea with a specific text-indent property. However, on Edge, the placeholder text appears displaced more than expected. To h ...

Displaying nested JSON data in a user interface using React

I have a complex nested JSON structure that I am using to build a user interface. While I have successfully implemented the first part, I am encountering difficulties with the second part. My Objective The nested JSON displays parent elements and now I a ...

The challenge of Webpack errors arising from sharing a project between two different machines

My project is saved in a Google Drive folder and runs smoothly on one of my machines. However, when I try to compile the code on another machine, I encounter multiple errors all related to loading images. The error message below is just one example (others ...

Highcharts: Show tooltip above all elements

Is there a way to configure tooltip display above all elements? I want to define specific coordinates so that the tooltip remains open even if it is covering the chart, and only closes when interacting with the top block. Screenshot 1 Screenshot 2 For e ...

Placing a collection of <a> anchor tags inside a div and making them float

I've been experimenting with building a website from scratch, opting for a simple and blocky design. I placed the navigation at the top of the page in an unordered list format containing <a> elements within list tags, all enclosed within a <n ...

Error TS2339 occurs when attempting to migrate to TypeScript due to the absence of the 'PropTypes' property on the 'React' type

Currently in the process of converting a javascript/react project to a typescript/react/redux project. Encountering an issue with this particular file: import React from 'react'; import GoldenLayout from 'golden-layout'; import {Provi ...

Is there a way to create a layout with a row containing two columns and another row with just one column using MUI Grid?

Is it possible to achieve the design displayed in the image using MUI components? I am facing an issue where I am unable to properly insert a third Button into the MUI grid with the same width as the other two buttons. Any suggestions on how to solve this ...

Crafting a custom URL using axios that incorporates a parameter with the special character "&" in it

Currently, I am working on a project involving axios.get and the URL structure is as follows: http://example.com/path?element1={example1}&element2={example2}&element3={function(query)} function ((condition1: string, condition2: string) => { q ...