Custom Bootstrap checkboxes render bug when using CSS column-width in IE

Question

I use Bootstrap's (version 4) custom checkboxes. If I align them using column-width in their parent container, the checkboxes in the last column do not appear in IE 11. In Chrome and FF it is OK.

The label text is visible but the pseudo-elements which contain the actual custom checkbox are not. Do you have any workaround for this render bug?

.container {
  column-width: 100px;
}

<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="custom-checkbox custom-control">
      <input type="checkbox" class="custom-control-input" id="check1"/>
      <label class="custom-control-label" for="check1">test1</label>
    </div>
    <div class="custom-checkbox custom-control">
      <input type="checkbox" class="custom-control-input" id="check2"/>
      <label class="custom-control-label" for="check2">test2</label>
    </div>
    <div class="custom-checkbox custom-control">
      <input type="checkbox" class="custom-control-input" id="check3"/>
      <label class="custom-control-label" for="check3">test3</label>
    </div>
    <div class="custom-checkbox custom-control">
      <input type="checkbox" class="custom-control-input" id="check4"/>
      <label class="custom-control-label" for="check4">test4</label>
    </div>
    <div class="custom-checkbox custom-control">
      <input type="checkbox" class="custom-control-input" id="check5"/>
      <label class="custom-control-label" for="check5">test5</label>
    </div>
    <div class="custom-checkbox custom-control">
      <input type="checkbox" class="custom-control-input" id="check6"/>
      <label class="custom-control-label" for="check6">test6</label>
    </div>
</div>

You can check a JSBin demo here: https://jsbin.com/micodetolo/1/edit?html,css,output

What pseudo-elements? Your HTML only has normal elements in it. — TylerH, Oct 28 '19 at 13:58
Bootstrap uses pseudo-elements (before and after) added to label to display custom checkboxes. You can find it in demo checking at label. — bugovicsb, Oct 28 '19 at 15:20
Oh, they're on the label. I was confused as to how they were appearing without anything showing up in the CSS for the input... — TylerH, Oct 28 '19 at 15:25
It looks like IE11 in general has issues with checkboxes on pseudo-elements. See https://stackoverflow.com/questions/12831620/is-the-before-pseudo-element-allowed-on-an-inputtype-checkbox and especially https://stackoverflow.com/questions/26961271/valid-css-not-working-in-internet-explorer-11 — TylerH, Oct 28 '19 at 16:04

score 3 · Accepted Answer · answered Oct 28 '19 at 15:28

3

Label css class in _reboot.scss has display : inline-block causing this issue.

answered Oct 28 '19 at 15:28

Deepak-MSFT

10,379
1
12
19

Just noticed the same. Try `display: ruby` it will work. – Tim Vermaelen Oct 28 '19 at 15:28
Yes, I tested it. display: ruby is working but as it is not op's code op will not able to modify it. – Deepak-MSFT Oct 28 '19 at 15:34

Tim Vermaelen · Answer 2 · 2019-10-28T15:42:10.947

3

Interesting issue as Deepak-MSFT mentioned it's cause by the label display.

A quick CSS override solution to target IE:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   .custom-control .custom-control-label {
       display: ruby;
   }
}

edited Oct 28 '19 at 15:42

answered Oct 28 '19 at 15:35

Tim Vermaelen

6,869
1
25
39

For anyone who may not be familiar with `display: ruby`: https://developer.mozilla.org/en-US/docs/Web/CSS/ruby-position – TylerH Oct 28 '19 at 16:07

Custom Bootstrap checkboxes render bug when using CSS column-width in IE

2 Answers2