Stick footer to the bottom of the page (DevExpress#46)

marcwittke · Oct 2, 2018 · e5ab383 · e5ab383
1 parent a99696e
commit e5ab383
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/src/app/layout/layout.component.html b/src/app/layout/layout.component.html
@@ -4,7 +4,7 @@
     </div>
 
     <dx-drawer
-        class="content"
+        class="drawer"
         [closeOnOutsideClick]="shaderEnabled"
         [openedStateMode]="menuMode"
         [revealMode]="menuRevealMode"
@@ -23,7 +23,10 @@
         </app-navigation-menu>
 
         <dx-scroll-view>
-            <ng-content></ng-content>
+            <div class="content">
+                <ng-content></ng-content>
+            </div>
+
 
             <div class="footer">
                 <ng-content select="app-footer"></ng-content>

diff --git a/src/app/layout/layout.component.scss b/src/app/layout/layout.component.scss
@@ -13,7 +13,21 @@
     z-index: 1;
 }
 
+::ng-deep .dx-scrollable-content {
+    height: 100%;
+}
+
+::ng-deep .dx-scrollview-content {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+}
+
 .content {
+    flex-grow: 1;
+}
+
+.drawer {
     flex: 1;
     min-height: 0;
 
@@ -32,7 +46,7 @@
     }
 }
 
-.screen-large .content ::ng-deep .dx-card {
+.screen-large .drawer ::ng-deep .dx-card {
     padding: 40px;
 }