My application has a form styled with Bootstrap 4 that looks how I want it in all browsers except for Internet Explorer 11.
To achieve the layout, I used Bootstrap's .form-inline class as suggested in the documentation.
The
.form-inlineclass is recommended to showcase labels, form controls, and buttons on a single horizontal row.
The form should render like this. Here's a screenshot from Chrome v80:
https://i.sstatic.net/FRrDg.png
In IE 11, however, it appears differently.
https://i.sstatic.net/NIed7.png
This is the markup being used:
<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 class in IE 11 using Developer Tools, the layout improves but still isn't perfect.
https://i.sstatic.net/UXss0.png
I came across an issue regarding inline-flex elements breaking to new lines in IE11 and tried replacing my .row with a .container. This resolved some issues but centered the form, which isn't ideal in other browsers. It also made the input fields longer than desired.
https://i.sstatic.net/3pUnW.png
Is there a way to keep the form left-aligned and on one line while fixing this problem specifically for IE 11 without breaking compatibility with other browsers? I aim to maintain consistent rendering like the first screenshot across all browsers.