I'm building a Service Portal in ServiceNow and am having issues with bootstrap card decks rendering correctly in IE 11. ServiceNow actually doesn't even support boostrap4, so our team hacked it by copying and pasting the back-end CSS and then replacing the class names from "card" to "wrap". Below is a screenshot of what it looks like in Chrome, Firefox, etc.
Below is what the same exact thing looks like in IE11:
Not only are the images a bit stretched out, but more importantly, the Service Portal row doesn't seem to recognize it and the rows below it overlap. I'm fairly certain it is because Service Portal does not recognize flexboxes.
Below is our CSS code:
@media (min-width: 576px) {
.wrap-deck {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap
}
.wrap-deck .wrap {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
-webkit-flex: 1 0 0%;
flex: 1 0 0%;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column
}
.wrap, .wrap > span, .wrap > span > div {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
-webkit-flex: 1 0 0%;
flex: 1 0 0%;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column
}
Has anyone experienced this? Does anyone have a solution?
