Bug 1369550 - ovirt-engine dashboard - set status cards to same height when lines wrap
Summary: ovirt-engine dashboard - set status cards to same height when lines wrap
Keywords:
Status: CLOSED CURRENTRELEASE
Alias: None
Product: ovirt-engine-dashboard
Classification: oVirt
Component: Core
Version: unspecified
Hardware: Unspecified
OS: Unspecified
medium
low
Target Milestone: ovirt-4.1.1
: 1.1.0
Assignee: Scott Dickerson
QA Contact: Pavel Novotny
URL:
Whiteboard:
Depends On:
Blocks:
TreeView+ depends on / blocked
 
Reported: 2016-08-23 17:48 UTC by Greg Sheremeta
Modified: 2017-04-21 09:50 UTC (History)
6 users (show)

Fixed In Version:
Clone Of:
Environment:
Last Closed: 2017-04-21 09:50:17 UTC
oVirt Team: UX
Embargoed:
rule-engine: ovirt-4.1+
mgoldboi: planning_ack+
gshereme: devel_ack+
pstehlik: testing_ack+


Attachments (Terms of Use)
dashboard card hight & line wrapping (72.21 KB, image/png)
2017-03-16 15:03 UTC, Pavel Novotny
no flags Details


Links
System ID Private Priority Status Summary Last Updated
oVirt gerrit 64173 0 master MERGED force status card titles and content to be the same height 2017-01-30 20:58:10 UTC
oVirt gerrit 71733 0 ovirt-engine-dashboard-1.1 MERGED force status card titles and content to be the same height 2017-02-08 13:58:49 UTC

Description Greg Sheremeta 2016-08-23 17:48:16 UTC
Description of problem:
PatternFly reference code at [1] uses a jQuery plugin [2] to achieve "all
status cards having the same height" appearance. We should use that in
Dashboard UI.

[1]
http://www.patternfly.org/pattern-library/cards/aggregate-status-card/#/_code

[2] $(stuff).matchHeight();

Comment 1 Scott Dickerson 2016-09-21 13:10:43 UTC
Patch [1] adds jquery-match-height to the shrinkwrap rpm used to be build the dashboard's rpm.

[1] - https://gerrit.ovirt.org/#/c/64221/

Comment 2 Vojtech Szocs 2017-01-02 12:24:58 UTC
(In reply to Scott Dickerson from comment #1)
> Patch [1] adds jquery-match-height to the shrinkwrap rpm used to be build
> the dashboard's rpm.
> 
> [1] - https://gerrit.ovirt.org/#/c/64221/

Since we maintain our own (React-based) implementation of PatternFly components, using a React-centric approach [1] seems better than jQuery-centric approach [2].

[1] https://github.com/patrickgalbraith/react-equalizer
[2] https://github.com/liabru/jquery-match-height

Comment 3 Pavel Novotny 2017-03-16 15:02:49 UTC
Verified in 
rhevm-4.1.1.3-0.1.el7.noarch
ovirt-engine-dashboard-1.1.0-6.el7ev.noarch

Browsers: Firefox 52 ESR, Chromium 56

If line wrapping occurs, all inventory cards are adjusted to the same height.
See the attached screenshot with comparison against 4.0, where the cards height is not always the same.

Comment 4 Pavel Novotny 2017-03-16 15:03:33 UTC
Created attachment 1263712 [details]
dashboard card hight & line wrapping


Note You need to log in before you can comment on or make changes to this bug.