When coding a select dropdown box using simple HTML, I encountered an issue where it displayed properly in Google Chrome and Firefox, but not in Internet Explorer. In IE, the dropdown became too long and extended out of the box.
I attempted to set the width and max-width properties of the select class to 100%, but this did not resolve the problem.
https://i.sstatic.net/SeQVx.jpg
.form-parent {
.form-container {
input {
border-color: $ThemeColorLightGray;
background-color: $ThemeColorLightGray;
}
}
}
.form-container {
display: inline-block;
width: 100%;
padding: 0 0 40px;
.form-control,
.base-datepicker[readonly] {
border-color: $ThemeColorLightGray;
background-color: $ThemeColorLightGray;
}
.form-tooltip {
display: inline-block;
position: absolute;
}
}
.form-control {
display: block;
width: 100%;
height: calc(2.25rem + 2px);
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0;
}
select {
-webkit-writing-mode: horizontal-tb !important;
text-rendering: auto;
color: black;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
text-align: start;
white-space: pre;
-webkit-rtl-ordering: logical;
cursor: default;
font: 400 13.3333px Arial;
}<form method="POST" action="" class="custom-form form-parent js-flex-box">
<div class="form-container">
<fieldset>
<div class="form-group">
<div class="groupOrder" style="width: 100%; overflow: hidden; background-color: red;">
<select name="Hotel" placeholder="Choose hotel" title="Choose hotel" aria-label="Choose hotel" class="pham form-control pristine touched" aria-required="true" aria-invalid="false" style="overflow: hidden !important; float: right;">
<option value="" selected="selected">Choose hotel</option>
<option value="Wakeup Copenhagen">Wakeup Copenhagen, Bernstorffsgade</option>
<option value="Wakeup Copenhagen, Borgergade">Wakeup Copenhagen, Borgergade</option>
<option value="Wakeup Copenhagen, Carsten Niebuhrs Gade">Wakeup Copenhagen, Carsten Niebuhrs Gade</option>
<option value="Wakeup Aarhus, Bruunsgade">Wakeup Aarhus, Bruunsgade</option>
</select>
</div>
<div class="form-tooltip">
<div style="display: none;">This field must be filled out</div>
</div>
</div>
</fieldset>
</div>
</form>