Has anyone encountered an issue with two buttons on the right side of the screen getting pushed out of view in IE10? If so, how can this be resolved?
When viewed in Chrome, the layout appears as expected:
In IE10, however, the buttons are off to the side and not visible, without even a scrollbar present:
HTML:
<div class="section-header">
<div tabindex="0" class="section-toggle section-toggle-up" role="button" aria-pressed="false">
<input type="text" tabindex="-1" role="presentation" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;">
<div class="html-face">Reader 1</div>
</div>
<div class="section-header-widgets">
<div tabindex="0" class="slider slider-up" role="button" aria-pressed="false">
<input type="text" tabindex="-1" role="presentation" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;">
<div></div>
</div>
<div class="buttonContainer">
<div class="sidebuttons">
<button type="button" class="removeButton"></button>
<button type="button" class="exportButton"></button>
</div>
</div>
</div>
</div>
CSS:
.section-header, .section-header-widgets {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
display: -ms-flexbox;
-ms-flex-direction: row;
-ms-flex-align: center;
-ms-flex-pack: start;
}
.section-header-widgets {
width: 100%;
}
.section-toggle {
min-height: 50px;
background-repeat: no-repeat;
background-position: left;
padding-left: 2.5em;
font-weight: bold;
line-height: 2.5em;
max-height: 2.5em;
cursor: pointer;
}
.section-toggle-up {
min-width: 200px;
}
.slider {
background-repeat: no-repeat;
background-position: left;
height: 34px;
width: 65px;
margin-left: 3em;
cursor: pointer;
border: 1px solid black;
}
.buttonContainer {
flex: 1;
-ms-flex: 1;
text-align: right;
}
.addButton, .removeButton, .exportButton, .openFileButton {
height: 40px;
width: 40px;
padding: 0;
border: 1px solid black;
cursor: pointer;
margin-right: 20px;
}