Bootstrap 4 Custom Checkbox missing height - html

Question

I made a checkbox with a custom checkmark with BS4. But the elements overflow the container .SamCheckbox. It seems some elements are not given full height so it breaks the document flow. Like when you forget to clear a float - but this is done with flexbox, not floats.
How can I avoid this and having the checkbox not breaking the height?
<div class="SamCheckbox custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="sam-check-1" value="18">
<i class="custom-control-indicator"></i>
</div>
I given it min-height to ensure a height but that shouldn't be necessary, I think.
.SamCheckbox {
min-height: 34px !important;
&.custom-checkbox {
.custom-control-input {
display: none;
& ~ .custom-control-indicator {
background: none;
border: 1px solid #333;
color: blue;
font-size: 1.6rem;
width: 36px;
height: 36px;
&::before {
position: absolute;
top: 5px;
left: 5px;
}
}
&:checked ~ .custom-control-indicator {
border: 1px solid #999;
background: none;
}
&:disabled ~ .custom-control-indicator {
border: none;
background: none;
}
}
}
}
How can I ensure that <div class="SamCheckbox"> contains all child elements and has full height?
Here's a codepen with usage in context:
https://codepen.io/olefrankjensen/pen/RxXEBN?editors=1100

Answer 1

The reason the .custom-control-indicator overflow the .SamCheckbox, is that it has position: absolute, and as that takes it out of flow, .SamCheckbox won't pick up its size.
Additionally, .SamCheckbox has padding-left: 1.5rem and .custom-control-indicator has top: 0.25rem, which further more offset the .custom-control-indicator.
Resetting those values will solve the overflow and align it properly.
.SamCheckbox {
padding-left: 0; /* added */
&.custom-checkbox {
.custom-control-input {
display: none;
& ~ .custom-control-indicator {
background: none;
border: 1px solid $color-grey-dark;
color: $color-active;
font-size: 1.6rem;
width: 36px;
height: 36px;
position: relative; /* added */
top: 0; /* added */
Updated codepen
Stack snippet
.ContractTemplateDetails {
cursor: pointer;
border: 1px solid #ccc;
padding: 2rem !important;
}
.ContractTemplateDetails:hover {
background-color: #e5e5e5;
}
.ContractTemplateDetails.checked {
padding: 2rem;
background-color: #ccc;
-webkit-box-shadow: 0.25rem 0.25rem 0 0 #999;
-moz-box-shadow: 0.25rem 0.25rem 0 0 #999;
box-shadow: 0.25rem 0.25rem 0 0 #999;
}
.ContractTemplateDetails .contract-image img {
width: 100%;
}
.ContractTemplateDetails .contract-image .image-placeholder {
max-width: 25%;
}
.ContractTemplateDetails .contract-price h2 {
font-family: Times serif;
}
.ContractTemplateDetails .contract-list, .ContractTemplateDetails .contract-list li {
margin-left: 0;
padding-left: 0;
list-style-type: none;
}
.ContractTemplateDetails .contract-list li {
text-align: left;
color: #666;
font-size: 0.8rem;
}
.ContractTemplateDetails .contract-list li:not(:first-child) {
margin-top: 1rem;
}
.SamCheckbox {
padding-left: 0;
/* added */
}
.SamCheckbox.custom-checkbox .custom-control-input {
display: none;
}
.SamCheckbox.custom-checkbox .custom-control-input ~ .custom-control-indicator {
background: none;
border: 1px solid #666;
color: blue;
font-size: 1.6rem;
width: 36px;
height: 36px;
position: relative;
/* added */
top: 0;
/* added */
}
.SamCheckbox.custom-checkbox .custom-control-input ~ .custom-control-indicator::before {
position: absolute;
top: 5px;
left: 5px;
}
.SamCheckbox.custom-checkbox .custom-control-input:checked ~ .custom-control-indicator {
border: 1px solid #666;
background: none;
}
.SamCheckbox.custom-checkbox .custom-control-input:disabled ~ .custom-control-indicator {
border: none;
background: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat distinctio cupiditate debitis similique quod eligendi animi blanditiis rem. Neque libero nam facilis blanditiis consectetur pariatur veritatis esse consequatur vel sit.</div>
<div class="col-4">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odit, nostrum at a non quidem possimus explicabo saepe eum culpa quos laboriosam repudiandae corporis velit molestiae tempora natus ea tenetur quod.</div>
</div>
<div class="row">
<div class="col-sm-5 offset-sm-1">
<section class="ContractTemplateDetails mt-sm-0 unselectable mr-sm-2 card card-block h-100 justify-content-center align-items-center" data-template-id="18">
<div class="contract-image"><img class="" src="http://freevector.co/wp-content/uploads/2010/05/29358-toy-car-outline.png" alt="Contract Basic"></div>
<h4 class="contract-title">Contract Basic</h4>
<ul class="contract-list">
<li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit non </li>
<li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit non.</li>
<li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit non </li>
<li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit non omfattet af serviceaftalen.</li>
</ul>
<div class="contract-price mt-auto">
<h2 class="component-margin-top-small">205,00 kr./md.</h2>
</div>
<div class="SamCheckbox custom-control custom-checkbox"><input type="checkbox" class="custom-control-input" id="sam-check-undefined" value="18"><i class="custom-control-indicator"></i></div>
</section>
</div>
<div class="col-sm-5">
<section class="ContractTemplateDetails mt-sm-0 unselectable mr-sm-2 checked card card-block h-100 justify-content-center align-items-center" data-template-id="18">
<div class="contract-image"><img class="" src="http://freevector.co/wp-content/uploads/2010/05/29358-toy-car-outline.png" alt="OmniCar Premium"></div>
<h4 class="contract-title mt-md">Contract Premium</h4>
<ul class="contract-list mb-md">
<li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit non .</li>
<li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit non .</li>
<li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit non mellem serviceeftersyn.</li>
<li>Reparationer som er nødvendige for, at bilen fungerer drift Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit non skulle ske at virke. Det kan jeg næsten ikke tro! mv. Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Impedit non </li>
</ul>
<div class="contract-price mt-auto">
<h2 class="component-margin-top-small">540,00 kr./md.</h2>
</div>
<div class="SamCheckbox custom-control custom-checkbox mt-sm"><input type="checkbox" class="custom-control-input" id="sam-check-5" value="19"><i class="fa fa-check custom-control-indicator"></i></div>
</section>
</div>
</div>
</div>
As a side note, one of the best ways to see what's going on in cases like this, is to e.g. add a border on the container, as done here in the original codepen. With that one most of the time will find the issue quite fast, and either immediately understand what's wrong, or, with the browser's dev.tools, check which classes/properties is applied, and their values.