Bootstrap 4 ASP.NET check box alignment and usability

Question

0.00/5 (No votes)

See more:

Hello All,

I'm pulling my hair out trying to align a Bootstrap 4 Custom-CheckBox in my form group.
Also, the check box does not work if you click on the check box or label, but does if you click about 1cm left of the checkbox.

Image displaying the form can be seen here [https://postimg.cc/34CBTp9p]

I have the following code (With the comment 'ISSUE WITH THE FOLLOWING' highlighting the check box.)

ASP.NET

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="checktest.aspx.vb" Inherits="CustomerCareSystemWeb.checktest" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title>Check Box Test</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" />
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
	<form id="form1" runat="server">
		<br />
		<div class="card">
			<div class="card-body">
				<h4 class="card-title">Student Search/Create</h4>
				<hr />
				<div class="form-group row">

					<asp:Label ID="lblStudentId" CssClass="col-2 col-form-label" AssociatedControlID="txtStudentId" runat="server" Text="Student Id:"></asp:Label>
					<div class="col-4">
						<asp:TextBox ID="txtStudentId" CssClass="form-control" runat="server"></asp:TextBox>
					</div>

					<asp:Label ID="lblStudentEmail" CssClass="col-2 col-form-label" AssociatedControlID="txtStudentEmail" runat="server" Text="Student Email:"></asp:Label>
					<div class="col-4">
						<asp:TextBox ID="txtStudentEmail" CssClass="form-control" runat="server"></asp:TextBox>
					</div>

				</div>

				<div class="form-group row">

					<asp:Label ID="lblFirstName" CssClass="col-2 col-form-label" AssociatedControlID="txtStudentFirstName" runat="server" Text="Student First Name:"></asp:Label>
					<div class="col-4">
						<asp:TextBox ID="txtStudentFirstName" CssClass="form-control" runat="server"></asp:TextBox>
					</div>

					<asp:Label ID="lblStudentSurname" CssClass="col-2 col-form-label" AssociatedControlID="txtStudentSurname" runat="server" Text="Student Surname:"></asp:Label>
					<div class="col-4">
						<asp:TextBox ID="txtStudentSurname" CssClass="form-control" runat="server"></asp:TextBox>
					</div>

				</div>

				<div class="form-group row">

					<asp:Label ID="lblStudentMobile" CssClass="col-2 col-form-label" AssociatedControlID="txtStudentMobile" runat="server" Text="Student Mobile Phone:"></asp:Label>
					<div class="col-4">
						<asp:TextBox ID="txtStudentMobile" CssClass="form-control" runat="server"></asp:TextBox>
					</div>

					<asp:Label ID="lblStudentHomePhone" CssClass="col-2 col-form-label" AssociatedControlID="txtStudentHomePhone" runat="server" Text="Student Home Phone:"></asp:Label>
					<div class="col-4">
						<asp:TextBox ID="txtStudentHomePhone" CssClass="form-control" runat="server"></asp:TextBox>
					</div>

				</div>

				<div class="form-group row">

					<asp:Label ID="lblHowDidYouHear" CssClass="col-2 col-form-label" AssociatedControlID="ddlHowDidYouHear" runat="server" Text="How Did You Hear:"></asp:Label>
					<div class="col-4">
						<asp:DropDownList ID="ddlHowDidYouHear" runat="server" CssClass="custom-select"></asp:DropDownList>
					</div>
					<%--ISSUE WITH THE FOLLOWING--%>
					<asp:Label ID="lblNoDetails" CssClass="col-2 col-form-label" AssociatedControlID="customCheck" runat="server" Text="Personal Information:"></asp:Label>
					<div class="custom-control custom-checkbox">
						<input type="checkbox" class="custom-control-input" id="customCheck" name="customCheck" runat="server" />
						<label class="custom-control-label" for="customCheck">Not Provided</label>
					</div>

				</div>

				<div class="form-group row">

					<div class="col-8"></div>
					<div class="col-2">
						<asp:Button ID="btnSearchStudent" CssClass="btn btn-primary btn-block" runat="server" Text="Search Student" />
					</div>

				</div>

			</div>
		</div>
	</form>
</body>
</html>

Any help would be much appreciated.

What I have tried:

Apart from several google searched for different related terms. I have also tried adding padding and trying to debug the css in Chrome.

Posted 6-Mar-19 15:11pm

aparrygordontafe

Updated 25-Sep-19 8:49am

v4

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2019-09-25T08:50:00

There are two problems with your markup:

1) You need a <div class="col-4"> element around your custom checkbox.

2) You need a <div class="form-control-plaintext"> within that, also around your custom checkbox, to make it align vertically.

ASP.NET

<div class="col-4">
    <div class="form-control-plaintext">
        <div class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" id="customCheck" name="customCheck" runat="server" />
            <label class="custom-control-label" for="customCheck">Not Provided</label>
        </div>
    </div>
</div>

Demo[^]

Honda Chen · Answer 2 · 2019-09-24T22:52:00

There are 2 solutions test ok with Bootstrap verstion 4.3.1:
1. Add runat="server" clientidmode="Static" to original bootstrap code.
2. Use Request.Form["rdoName2"].

<div class="row">
    <div class="col">
        Checkbox and radio samples by BootStrap.
    </div>
</div>

<div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="same-address">
    <label class="custom-control-label" for="same-address">Shipping address is the same as my billing address</label>
</div>
<div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="save-info">
    <label class="custom-control-label" for="save-info">Save this information for next time</label>
</div>

<div class="d-block my-3">
    <div class="custom-control custom-radio">
        <input id="credit" name="paymentMethod" type="radio" class="custom-control-input" required>
        <label class="custom-control-label" for="credit">Credit card</label>
    </div>
    <div class="custom-control custom-radio">
        <input id="debit" name="paymentMethod" type="radio" class="custom-control-input" required>
        <label class="custom-control-label" for="debit">Debit card</label>
    </div>
    <div class="custom-control custom-radio">
        <input id="paypal" name="paymentMethod" type="radio" class="custom-control-input" required>
        <label class="custom-control-label" for="paypal">Paypal</label>
    </div>
</div>

<div class="row">
    <div class="col">
        aspx server control 的 Checkbox 與 radio-button 要正確套用到 BootStrap 成功很麻煩.
        <br />
        解決方法: 直接將 Bootstrap 的 html語法加入 runat="server" 及其他屬性, 將 html control 轉為 server control 最快!.
        <br />
        以下範例將以上的 Bootstrap html control 加入 runat="server" 轉為 server control.
        <br />
    </div>
</div>


<div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="chk1" runat="server" clientidmode="Static">
    <label class="custom-control-label" for="chk1">CheckBox1</label>
</div>
<div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="chk2" runat="server" clientidmode="Static">
    <label class="custom-control-label" for="chk2">CheckBox2</label>
</div>

<div class="d-block my-3">
    <div class="custom-control custom-radio">
        <input id="rdo1" name="rdoName" type="radio" value="1" class="custom-control-input" required runat="server" clientidmode="Static">
        <label class="custom-control-label" for="rdo1">Credit card</label>
    </div>
    <div class="custom-control custom-radio">
        <input id="rdo2" name="rdoName" type="radio" value="2" class="custom-control-input" required runat="server" clientidmode="Static">
        <label class="custom-control-label" for="rdo2">Debit card</label>
    </div>
    <div class="custom-control custom-radio">
        <input id="rdo3" name="rdoName" type="radio" value="3" class="custom-control-input" required runat="server" clientidmode="Static">
        <label class="custom-control-label" for="rdo3">Paypal</label>
    </div>
</div>

<div class="row">
    <div class="col">
        For easy used with Request.Form["rdoName2"] on server side,  forget about server control, use html control only:
    </div>
</div>

<div class="d-block my-3">
    <div class="custom-control custom-radio">
        <input id="rdo21" name="rdoName2" type="radio" value="1" class="custom-control-input" required >
        <label class="custom-control-label" for="rdo21">Credit card</label>
    </div>
    <div class="custom-control custom-radio">
        <input id="rdo22" name="rdoName2" type="radio" value="2" class="custom-control-input" required >
        <label class="custom-control-label" for="rdo22">Debit card</label>
    </div>
    <div class="custom-control custom-radio">
        <input id="rdo23" name="rdoName2" type="radio" value="3" class="custom-control-input" required >
        <label class="custom-control-label" for="rdo23">Paypal</label>
    </div>
</div>

Bootstrap 4 ASP.NET check box alignment and usability

2 solutions

Solution 2

Solution 1

Add your solution here

Preview 0