Bootstrap 4 .form-inline not working in Internet Explorer 11

2020-03-25 html css bootstrap-4 internet-explorer-11

I have a form in an application using Bootstrap 4. It renders as I want it to in all browsers, except Internet Explorer 11.

I have used Bootstrap's .form-inline class because according to the docs

Use the .form-inline class to display a series of labels, form controls, and buttons on a single horizontal row.

The correct rendering of the form looks like this. The screenshot below was taken from Chrome v80:

enter image description here

In Internet Explorer 11 it renders as follows.

enter image description here

The markup is as follows.

<div class="row">
    <form method="get" class="form-inline" action="#"> 

        <div class="col">   
            <label for="date_start" class="mr-2 float-left">From</label>
            <div class="input-group date mr-5" id="dateStart" data-target-input="nearest">
                <div class="input-group-append" data-target="#dateStart" data-toggle="datetimepicker">
                    <div class="input-group-text"><i class="fa fa-calendar" aria-hidden="true"></i></div>
                </div>
                <input type="text" name="dateStart" value="2020-03-17" class="form-control datetimepicker-input" data-target="#dateStart" autocomplete="off">  
            </div>
        </div>

        <div class="col">
            <label for="date_end" class="mr-2 float-left">To</label>
            <div class="input-group date mr-5" id="dateEnd" data-target-input="nearest">
                <div class="input-group-append" data-target="#dateEnd" data-toggle="datetimepicker">
                    <div class="input-group-text"><i class="fa fa-calendar" aria-hidden="true"></i></div>
                </div>
                <input type="text" name="dateEnd" value="2020-03-24" class="form-control datetimepicker-input" data-target="#dateEnd" autocomplete="off">  
            </div>
        </div>

        <button class="btn btn-primary btn-md-top-pad">View Notifications <i class="fas fa-chevron-right" aria-hidden="true"></i></button>

    </form>
</div>

If I remove the .form-inline in Internet Explorer 11 using Developer Tools the layout is more usable but still broken.

enter image description here

I read inline-flex input element breaks to new line in IE11 and tried swapping my .row with a .container. This seems to help but it centres the form and therefore doesn't look as I want in other (non IE 11) browsers. It also makes the input fields look much longer than desired.

enter image description here

Surely it is possible to left align the form and have it all on one line?

What is the problem with this and how can I fix it for IE 11 in a way that won't break it for other browsers? I want to render it as per the first screenshot, consistently in all browsers.

Answers

I compared with the official demo which can work well in IE 11, it seems that the issue is with <div class="col">. The elements in the form are not wrapped by div .col in the official demo. I removed them and it can work well in IE 11 and other browsers.

Online demo

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<form method="get" class="form-inline" action="#">

  <label for="date_start" class="mr-2 float-left">From</label>
  <div class="input-group date mr-5" id="dateStart" data-target-input="nearest">
    <div class="input-group-append" data-target="#dateStart" data-toggle="datetimepicker">
      <div class="input-group-text"><i class="fa fa-calendar" aria-hidden="true"></i></div>
    </div>
    <input type="text" name="dateStart" value="2020-03-17" class="form-control datetimepicker-input" data-target="#dateStart" autocomplete="off">
  </div>

  <label for="date_end" class="mr-2 float-left">To</label>
  <div class="input-group date mr-5" id="dateEnd" data-target-input="nearest">
    <div class="input-group-append" data-target="#dateEnd" data-toggle="datetimepicker">
      <div class="input-group-text"><i class="fa fa-calendar" aria-hidden="true"></i></div>
    </div>
    <input type="text" name="dateEnd" value="2020-03-24" class="form-control datetimepicker-input" data-target="#dateEnd" autocomplete="off">
  </div>

  <button class="btn btn-primary btn-md-top-pad">View Notifications <i class="fas fa-chevron-right" aria-hidden="true"></i></button>

</form>

Related