From 1f052906f28f905ede2b4d92913b9e4ba9d6c8c6 Mon Sep 17 00:00:00 2001
From: Diana Whitten <hurgleburgler@gmail.com>
Date: Fri, 21 Aug 2015 10:51:19 -0700
Subject: [PATCH] Default Sidebar should grow with page height

The 'default' theme sidebar needs to grow with the size of the page,
rather than just spanning the initial viewport on page load.

Change-Id: I7fbdacb517541f9e35d1887b3af80a918a1aa497
Closes-bug: #1485764
---
 .../dashboard/scss/components/_sidebar.scss   |  5 +--
 .../static/dashboard/scss/horizon.scss        | 39 ++++++++++++++++---
 2 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/openstack_dashboard/static/dashboard/scss/components/_sidebar.scss b/openstack_dashboard/static/dashboard/scss/components/_sidebar.scss
index 6521f1d6b8..ea8845a7bd 100644
--- a/openstack_dashboard/static/dashboard/scss/components/_sidebar.scss
+++ b/openstack_dashboard/static/dashboard/scss/components/_sidebar.scss
@@ -1,8 +1,5 @@
 #sidebar {
-  margin-left: -$sidebar-width;
-  left: $sidebar-width;
-  width: $sidebar-width;
-  position: absolute;
+  min-width: $sidebar-width;
   z-index: 0;
 
   // Sets the arrow toggles for each dashboard list
diff --git a/openstack_dashboard/static/dashboard/scss/horizon.scss b/openstack_dashboard/static/dashboard/scss/horizon.scss
index 40c20159a1..7dd22fbc7a 100644
--- a/openstack_dashboard/static/dashboard/scss/horizon.scss
+++ b/openstack_dashboard/static/dashboard/scss/horizon.scss
@@ -42,9 +42,41 @@
   zoom: 1;
 } // IE7
 
-body {
+
+// Basic Page Layout
+// Make the sidebar span the entire page, instead of just the Viewport
+// Display Table is not ideal, but it will allow dynamic resizing of
+// the sidebar while growing its container to fill the entire window
+html, body, #container {
+  height: 100%;
 }
 
+// Theme Note:
+// The following 1px is the default 1px for nav border in Bootstrap. If
+// this value is customized, then this value must change to compensate
+$navbar-border-size: 1px !default;
+$navbar-true-height: $navbar-height + $navbar-border-size !default;
+
+#main_content {
+  height: 100%; /* fallback if needed --> its scrolls, but it works */
+  height: calc(100% - #{$navbar-true-height});
+  display: table;
+}
+
+#content_body,
+#sidebar {
+  display: table-cell;
+  vertical-align: top;
+}
+
+#content_body {
+  width: 100%;
+  padding-left: $content-body-padding;
+  padding-right: $content-body-padding;
+}
+
+// Basic Page Layout End
+
 small {
   font-size: 11px;
 }
@@ -962,11 +994,6 @@ tr.terminated {
   text-align: center;
 }
 
-#content_body {
-  padding-left: $sidebar-width + $content-body-padding;
-  padding-right: $content-body-padding;
-}
-
 .tab_wrapper {
   padding-top: 50px;
 }