CODEWITHSUNDEEP
htmlcss
Elisabeth
Elisabeth

Reputation: 21206

Alternative to vertical alignment with table and table-cell

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');
       });   

   });

Upvotes: 0

Views: 1195

Answers (2)

Dariusz Sikorski
Dariusz Sikorski

Reputation: 4407

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

Upvotes: 0

minlare
minlare

Reputation: 2654

You could use FlexBox.
http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Browser Support
http://caniuse.com/#feat=flexbox

Upvotes: 1

Related Questions