OpenStack Dashboard (Horizon)

Rendering problem on Internet Explorer

Bug #1078735 reported by Jose Castro Leon on 2012-11-14

This bug affects 3 people

Affects		Status	Importance	Assigned to	Milestone
	OpenStack Dashboard (Horizon)	Fix Released	Medium	David Lyle	OpenStack Dashboard (Horizon) 2013.1 "grizzly"

Bug Description

There is a noticeable difference while rendering horizon in Internet Explorer and with other browsers (Chrome, Firefox, ...)

Reproducible: always
1. Open Internet Explorer
2. Connect to the website and log in

Actual Result:
Image attached

Expected Result:
Same user experience as Chrome, Firefox

Revision history for this message

Jose Castro Leon (jose-castro-leon) wrote on 2012-11-14:

horizon-IE.PNG Edit (190.1 KiB, image/png)

Revision history for this message

Jose Castro Leon (jose-castro-leon) wrote on 2012-11-14:

horizon-IE.patch Edit (361 bytes, text/plain)

It seems that the stylesheet used for rendering does not specify the width of the element sidebar
In Internet Explorer it adds each element on the side, and in other browsers they will append the new element

So if you specify the width to 222px (size of each element in the bar) the UI is consistent on all browsers

Revision history for this message

Gabriel Hurley (gabriel-hurley) wrote on 2012-11-20:

The screenshot clearly indicates the problem, but that's not on Folsom or trunk... could you (or someone) check/confirm that this problem exists in trunk, or if it's only an issue for a backport?

Changed in horizon:
importance:	Undecided → Medium
milestone:	none → grizzly-2
status:	New → Triaged

Revision history for this message

Lin Hua Cheng (lin-hua-cheng) wrote on 2012-11-29:

This has been there for a while, I've seen this problem both in Folsom-1 and Grizzly-1.

The problem becomes evident when a certain height of the sidebar has been consumed by the menu items. It seems that the height of the sidebar is fixed for IE, while the height automatically extends for FF and Chrome.

Changed in horizon:
status:	Triaged → Confirmed

Gabriel Hurley (gabriel-hurley) on 2013-01-06

Changed in horizon:
milestone:	grizzly-2 → grizzly-3

David Lyle (david-lyle) on 2013-01-30

Changed in horizon:
assignee:	nobody → David Lyle (david-lyle)

Revision history for this message

David Lyle (david-lyle) wrote on 2013-02-07:

The problem is only reproduceable when more than one panel group is present in a dashboard (e.g., when Object Store is enabled in the Project dashboard). A crude way to reproduce the problem and verify a fix is to comment out the "permissions" line in openstack_dashboard/dashboards/project/containers/panel.py to enable the second panel group.

David Lyle (david-lyle) on 2013-02-07

Changed in horizon:
status:	Confirmed → In Progress

Revision history for this message

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

Reviewed: https://review.openstack.org/21439
Committed: http://github.com/openstack/horizon/commit/ffe2168f87fa7de8eb536106051296abef40b7ac
Submitter: Jenkins
Branch: master

commit ffe2168f87fa7de8eb536106051296abef40b7ac
Author: David Lyle <email address hidden>
Date: Thu Feb 7 09:51:51 2013 -0700

Fixing sidebar layout in IE.

    This problem is only reproducible when more than one panel group is
    present in a dashboard (e.g., when Object Store is enabled in the
    Project dashboard). A crude way to reproduce the problem and verify
    a fix is to comment out the "permissions" line in
    openstack_dashboard/dashboards/project/containers/panel.py to enable
    the second panel group.

    The fix required was to remove an unnecessary float:left in
    horizon.less that caused problems in IE's layout engine. The
    float:left had no effect on layout in Chrome, Firefox or
    Safari(Windows version) in or out.

Fixes: bug #1078735
Change-Id: Idb0f8673d68ba686e1d7440fd2396e9a29b024ef