Alternative to vertical alignment with table and table-cell - html

Question

I have this pen: http://codepen.io/helloworld/pen/VYWGbz
I have set these classes in my production code and they cause IE 11 to NOT render somehow the left black border WHEN the drawer is opened.
When I remove the vertical-alignment with table/table-cell as display property the error disappears... (In Chrome its fine...)
What choice do I have else to vertically align the drawer`s glyphicon/span instead of using table on parent and table-cell on child to make vertical align possible with middle?
Note: The drawer/sidebar always have a height of 100% recieved by its parent.
.drawer-left-trigger{
display:table;
}
.drawer-left-trigger > span{
display:table-cell;
vertical-align:middle;
}
HTML
<div id="idtView">
<div style="height:100%;background:blue;" class="col-xs-3">
test1
</div>
<div style="height:100%;background:yellow;" class="col-xs-4">
test2
</div>
<div id="availableSidebarColumn" style="background:orange;padding:0;height:100%;" class="col-xs-1">
<div class="drawer-wrapper">
<div id='drawer-left' class='closed'>
<div class='drawer-left-trigger'>
<span class='glyphicon glyphicon-chevron-left'></span>
</div>
<div class='drawer-left-content'>
<div style="background:orange;;" id="availableCommandsPagerNavigation">
<span class="previous disabled glyphicon glyphicon-chevron-left availableOptionsArrow availableOptionsPagerArrow"></span>
<span class="glyphicon glyphicon-chevron-right availableOptionsArrow availableOptionsPagerArrow"></span>
</div>
<div style="background:gray;" id="availableCommandsContainer">
contentcontentcontentcontentcontentcontentcontent contentcontent content
</div>
</div>
</div>
</div>
</div>
<div style="height:100%;background:pink;" class="col-xs-4">
test2
</div>
</div>
CSS
/*new stuff*/
*{
box-sizing: border-box;
}
.drawer-wrapper{
margin: 0 200px;
display: inline-block;
}
/*The left drawer*/
#drawer-left{/*set a container with the total width of both the container and the trigger*/
position: relative;
height: 100%; width: 205px;
overflow: hidden;
transition: all .35s ease-in-out;
}
#drawer-left:after{/*this will the right border, when the content will be pushed out*/
content: '';
position: absolute;
right: 0; top: 0; bottom: 0;
border-right: 1px solid #000;
}
.drawer-left-trigger{
/*set the triggers width here, borders etc.*/
position: absolute;
top: 0; bottom: 0; right: 100%;
margin-right: -25px;/*bring it back inside the wrapper*/
width: 25px;
background:yellow;
/*some styling stuff*/
cursor: pointer;
text-align: center;
font-size: 24px;
line-height: 100%;
}
.drawer-left-trigger > span{
transform: rotate(180deg);
transition: all .35s ease-in-out;
}
#drawer-left.closed .drawer-left-trigger > span{
transform: rotate(0);
}
#drawer-left.closed .drawer-left-trigger{
/*this will push the trigger on the right side*/
left: auto;
right: 25px;
}
.drawer-left-content{
/*this is the container for the header and content*/
position: absolute;
top: 0; bottom: 0; right: 0; left: 24px;/*the triggers width(+-1px from the border)*/
}
#drawer-left.closed .drawer-left-content{
/*this will push the content out*/
left: 100%;
right: -100%;
}
.drawer-left-trigger,
.drawer-left-content{
border-left: 1px solid #000;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
transition: all .35s ease-in-out;
}
JS
$(function () {
/*the left one*/
$('.drawer-left-trigger').click(function(){
$(this).parent().toggleClass('opened closed');
});
});

Answer 1

You could use FlexBox.
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
Browser Support
http://caniuse.com/#feat=flexbox

Answer 2

You can use translateY, and position relative.
.drawer-left-trigger > span{
transition: all .35s ease-in-out;
transform: rotate(180deg) translateY(-50%);
position: relative;
top: 50%;
}
If the .drawer-wrapper is the only element on the page, consider setting its height to 100% instead of 500px by adding
html,body,.drawer-wrapper {
height: 100%;
}
If you need to add some navigation bar on top, calculate drawer's height by calc(100% - 50px) where 50px is the height of navigation bar.
Working version
http://codepen.io/antraxis/pen/yyoNpg