fix(sidenav): use flex display when opened

Closes #737.
angular · Nov 24, 2014 · ae1c152 · ae1c152
1 parent 2aa1a75
commit ae1c152
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/src/components/sidenav/_sidenav.scss b/src/components/sidenav/_sidenav.scss
@@ -8,13 +8,14 @@ md-sidenav {
   z-index: $z-index-sidenav;
   background-color: white;
   overflow: auto;
+  flex-direction: column;
 
   &.md-closed {
     display: none;
   }
   &.md-closed-add,
   &.md-closed-remove {
-    display: block;
+    display: flex;
     /* this is required as of 1.3x to properly
        apply all styling in a show/hide animation */
     transition: 0s all;
@@ -29,7 +30,7 @@ md-sidenav {
   &.md-locked-open.md-closed.md-sidenav-left,
   &.md-locked-open.md-closed.md-sidenav-right {
     position: static;
-    display: block;
+    display: flex;
     transform: translate3d(0, 0, 0);
   }
 

diff --git a/src/components/sidenav/demoBasicUsage/index.html b/src/components/sidenav/demoBasicUsage/index.html
@@ -9,10 +9,10 @@
         <h1 class="md-toolbar-tools">Sidenav Left</h1>
       </md-toolbar>
       <md-content class="md-padding" ng-controller="LeftCtrl">
-        <md-button ng-click="close()" class="md-primary" hide-gt-lg hide-lg>
+        <md-button ng-click="close()" class="md-primary" hide-gt-md>
           Close Sidenav Left
         </md-button>
-        <p hide show-gt-lg show-lg>
+        <p hide show-gt-md>
           This sidenav is locked open on your device. To go back to the default behavior,
           narrow your display.
         </p>
@@ -29,7 +29,7 @@ <h1 class="md-toolbar-tools">Sidenav Left</h1>
 
         <div>
           <md-button ng-click="toggleLeft()"
-            class="md-primary" hide-md>
+            class="md-primary" hide-gt-md>
             Toggle left
           </md-button>
         </div>