IE11 Flexbox issue using a Bootstrap .badge

173
February 09, 2018, at 11:39 PM

Currently, I have a flex-row that has one element grows with the space and a badge that justifies to the end and should not grow. But in IE11 with flex-grow: 0, the span.badge will not even take the width of the content inside of it. Any idea how to get the span.badge to just be the size of the content inside of it?

Codepen: https://codepen.io/anon/pen/gvmwNY

#sector-form-wrapper { 
  width: 500px; 
  padding: 1rem; 
} 
 
.form-check-with-badge { 
  display: flex; 
  flex-direction: row; 
  margin-bottom: 0.2rem; 
  line-height: 1.5rem; 
  justify-content: space-between; 
  align-items: center; 
} 
 
.form-check-with-badge .form-check { 
  flex: 1; 
} 
 
.form-check-with-badge .form-check label { 
  width: 100%; 
} 
 
.form-check-with-badge .badge { 
  flex: 0; 
} 
 
.form-check-with-badge .badge { 
  color: #fff; 
  padding-top: 0.4rem; 
  padding-bottom: 0.4rem; 
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.3/css/bootstrap.css" rel="stylesheet" /> 
 
<div id="sector-form-wrapper" class=""> 
  <div class="form-check-with-badge"> 
    <div class="form-check"><label class="form-check-label"><input type="checkbox" class="form-check-input" value="Apt"> 
              Apartment 
            </label></div> <span class="badge badge-pill" style="background-color: rgb(0, 128, 128);"> 
            344 
          </span></div> 
  <div class="form-check-with-badge"> 
    <div class="form-check"><label class="form-check-label"><input type="checkbox" class="form-check-input" value="Ret"> 
              Retail 
            </label></div> <span class="badge badge-pill" style="background-color: rgb(159, 191, 127);"> 
            283 
          </span></div> 
  <div class="form-check-with-badge"> 
    <div class="form-check"><label class="form-check-label"><input type="checkbox" class="form-check-input" value="Off"> 
              Office 
            </label></div> <span class="badge badge-pill" style="background-color: rgb(127, 159, 191);"> 
            200 
          </span></div> 
  <div class="form-check-with-badge"> 
    <div class="form-check"><label class="form-check-label"><input type="checkbox" class="form-check-input" value="Hot"> 
              Hotel 
            </label></div> <span class="badge badge-pill"> 
            49 
          </span></div> 
  <div class="form-check-with-badge"> 
    <div class="form-check"><label class="form-check-label"><input type="checkbox" class="form-check-input" value="Gen"> 
              Other 
            </label></div> <span class="badge badge-pill"> 
            29 
          </span></div> 
  <div class="form-check-with-badge"> 
    <div class="form-check"><label class="form-check-label"><input type="checkbox" class="form-check-input" value="Ind"> 
              Industrial 
            </label></div> <span class="badge badge-pill" style="background-color: rgb(191, 159, 127);"> 
            22 
          </span></div> 
  <div class="form-check-with-badge"> 
    <div class="form-check"><label class="form-check-label"><input type="checkbox" class="form-check-input" value="Spc"> 
              Specialty Properties 
            </label></div> <span class="badge badge-pill"> 
            8 
          </span></div> 
  <div class="form-check-with-badge"> 
    <div class="form-check"><label class="form-check-label"><input type="checkbox" class="form-check-input" value="Snr"> 
              Seniors Housing 
            </label></div> <span class="badge badge-pill"> 
            6 
          </span></div> 
  <div class="form-check-with-badge"> 
    <div class="form-check"><label class="form-check-label"><input type="checkbox" class="form-check-input" value="Aff"> 
              Affordable Housing 
            </label></div> <span class="badge badge-pill"> 
            5 
          </span></div> 
  <div class="form-check-with-badge"> 
    <div class="form-check"><label class="form-check-label"><input type="checkbox" class="form-check-input" value="Lnd"> 
              Land 
            </label></div> <span class="badge badge-pill"> 
            5 
          </span></div> 
</div>

Answer 1

Bootstrap 4 is flexbox-based by default. And those parts that don't have flexbox enabled by default can be easily enabled: https://getbootstrap.com/docs/4.0/utilities/flex/

That means: You can do everything you are attempting to do with your custom css, you can do all that with native Bootstrap 4 classes alone.

Using native Bootstrap 4 classes is recommended because when you do that you don't need to worry about IE 11 compatibility (because that has already been done and tested which is one of the main points of using Bootstrap in the first place). Whereas unnecessary css hacks will require even more css hacks to fix the problems caused by the original css hacks.

READ ALSO
Custom color map google GeoChart Google Developers

Custom color map google GeoChart Google Developers

I need the color of the clicked region to change colorThank you!

215
change the font size or the font color for the labels

change the font size or the font color for the labels

I am working with angularjs google chart APII have multiple charts in my webpage

127
How to add more than one CSS file using webpack project

How to add more than one CSS file using webpack project

I have 2 CSS files stylecss and responsive

187
Workaround for ePUB readers with mediocre CSS support?

Workaround for ePUB readers with mediocre CSS support?

It seems that some ePUB readers (including FBReader 012

124