Click here to Skip to main content
14,455,910 members
Rate this:
Please Sign up or sign in to vote.
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.)

<%@ 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
Updated 25-Sep-19 9:49am
v4
Rate this:
Please Sign up or sign in to vote.

Solution 2

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.

<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[^]
   
Rate this:
Please Sign up or sign in to vote.

Solution 1

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>
   

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




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100