Sidebar disappears at exact 768px width

[George Moon]

The following behaviours occur when the dashboard is viewed at specific widths:

- screen width <= 767px : the sidebar disappears and is replaced by a 'hamburger' button in the top bar. Works properly.
- screen width >= 769px : the sidebar is visible. Works properly.
- screen width == 768px : the sidebar disappears, but the main content padding is not adjusted, and no 'hamburger' button is added to the menu.

The SCSS code needs to be fixed so that the sidebar remains visible at a width of 768px, or the main content padding and hamburger menu appear at the width.

[George Moon (george-catalyst)]

It would appear that this bug is resolvable by changing the following two lines of SCSS.

diff --git a/openstack_dashboard/static/dashboard/scss/components/_sidebar.scss b/openstack_dashboard/static/dashboard/scss/components/_sidebar.scss
index ddca001..c6762ba 100644
--- a/openstack_dashboard/static/dashboard/scss/components/_sidebar.scss
+++ b/openstack_dashboard/static/dashboard/scss/components/_sidebar.scss
@@ -22,12 +22,12 @@
   z-index: 2;
   transition: all 0.3s ease 0s;

- @media (max-width: $screen-sm-min) {
+ @media (max-width: $screen-xs-max) {
     &.on-screen {
       visibility: visible;
       opacity: 1;
     }
   }
 }

 #sidebar {
@@ -39,7 +39,7 @@
     display: block;
   }

- @media (max-width: $screen-sm-min) {
+ @media (max-width: $screen-xs-max) {
     transition: all 0.3s ease 0s;
     position: fixed;
     top: $navbar-height;

[Eddie Ramirez (ediardo)]

Good catch.

[OpenStack Infra (hudson-openstack)]

Fix proposed to branch: master
Review: https://review.openstack.org/428509

[OpenStack Infra (hudson-openstack)]

Reviewed: https://review.openstack.org/428509
Committed: https://git.openstack.org/cgit/openstack/horizon/commit/?id=eada52a457980f2fbdfbf517ac1ee273921495f7
Submitter: Jenkins
Branch: master

commit eada52a457980f2fbdfbf517ac1ee273921495f7
Author: Eddie Ramirez <email address hidden>
Date: Fri Feb 3 00:34:03 2017 +0000

    Fix wrong min/max media queries for sidebar

    The media query for the sidebar menu was incorrect. This patch
    updates the correct min value when the sidebar should be displayed

    Change-Id: If6c424843d559aba87caf19333e1b725bf24e4cc
    Closes-bug: #1661422

[OpenStack Infra (hudson-openstack)]

Fix proposed to branch: stable/ocata
Review: https://review.openstack.org/430179

[OpenStack Infra (hudson-openstack)]

Reviewed: https://review.openstack.org/430179
Committed: https://git.openstack.org/cgit/openstack/horizon/commit/?id=4686c02cc2f360b98b9cc5cda3eb13c8fb50d847
Submitter: Jenkins
Branch: stable/ocata

commit 4686c02cc2f360b98b9cc5cda3eb13c8fb50d847
Author: Eddie Ramirez <email address hidden>
Date: Fri Feb 3 00:34:03 2017 +0000

    Fix wrong min/max media queries for sidebar

    The media query for the sidebar menu was incorrect. This patch
    updates the correct min value when the sidebar should be displayed

    Change-Id: If6c424843d559aba87caf19333e1b725bf24e4cc
    Closes-bug: #1661422
    (cherry picked from commit eada52a457980f2fbdfbf517ac1ee273921495f7)

[OpenStack Infra (hudson-openstack)]

This issue was fixed in the openstack/horizon 11.0.0.0rc2 release candidate.

[OpenStack Infra (hudson-openstack)]

This issue was fixed in the openstack/horizon 12.0.0.0b1 development milestone.