OpenStack Dashboard (Horizon)

Sidebar disappears at exact 768px width

Bug #1661422 reported by George Moon on 2017-02-02

This bug affects 1 person

Affects		Status	Importance	Assigned to	Milestone
	OpenStack Dashboard (Horizon)	Fix Released	Low	Eddie Ramirez	OpenStack Dashboard (Horizon) pike-1

Bug Description

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.

Tags:

Revision history for this message

George Moon (george-catalyst) wrote on 2017-02-02:

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;

Revision history for this message

Eddie Ramirez (ediardo) wrote on 2017-02-03:

Good catch.

Changed in horizon:
assignee:	nobody → Eddie Ramirez (ediardo)
status:	New → Confirmed

Revision history for this message

OpenStack Infra (hudson-openstack) wrote on 2017-02-03: Fix proposed to horizon (master)

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

Changed in horizon:
status:	Confirmed → In Progress

Rob Cresswell (robcresswell-deactivatedaccount) on 2017-02-06

Changed in horizon:
milestone:	none → pike-1
importance:	Undecided → Low

Revision history for this message

OpenStack Infra (hudson-openstack) wrote on 2017-02-06: Fix merged to horizon (master)

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

Changed in horizon:
status:	In Progress → Fix Released

Revision history for this message

OpenStack Infra (hudson-openstack) wrote on 2017-02-07: Fix proposed to horizon (stable/ocata)

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

Revision history for this message

OpenStack Infra (hudson-openstack) wrote on 2017-02-08: Fix merged to horizon (stable/ocata)

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)