Bug 1369550

Summary: ovirt-engine dashboard - set status cards to same height when lines wrap
Product: [oVirt] ovirt-engine-dashboard Reporter: Greg Sheremeta <gshereme>
Component: CoreAssignee: Scott Dickerson <sdickers>
Status: CLOSED CURRENTRELEASE QA Contact: Pavel Novotny <pnovotny>
Severity: low Docs Contact:
Priority: medium    
Version: unspecifiedCC: bugs, mgoldboi, oourfali, pstehlik, sdickers, vszocs
Target Milestone: ovirt-4.1.1Flags: rule-engine: ovirt-4.1+
mgoldboi: planning_ack+
gshereme: devel_ack+
pstehlik: testing_ack+
Target Release: 1.1.0   
Hardware: Unspecified   
OS: Unspecified   
Whiteboard:
Fixed In Version: Doc Type: If docs needed, set a value
Doc Text:
Story Points: ---
Clone Of: Environment:
Last Closed: 2017-04-21 09:50:17 UTC Type: Bug
Regression: --- Mount Type: ---
Documentation: --- CRM:
Verified Versions: Category: ---
oVirt Team: UX RHEL 7.3 requirements from Atomic Host:
Cloudforms Team: --- Target Upstream Version:
Embargoed:
Attachments:
Description Flags
dashboard card hight & line wrapping none

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