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-inlineclass 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:
In Internet Explorer 11 it renders as follows.
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.
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.
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.
