Bug 781286

Summary: Overlapped UI when importing image with long name
Product: [Retired] CloudForms Cloud Engine Reporter: Shveta <ssachdev>
Component: aeolus-conductorAssignee: Matt Wagner <matt.wagner>
Status: CLOSED CURRENTRELEASE QA Contact: wes hayutin <whayutin>
Severity: medium Docs Contact:
Priority: unspecified    
Version: 1.0.0CC: akarol, athomas, deltacloud-maint, slinaber, ssachdev
Target Milestone: rc   
Target Release: ---   
Hardware: Unspecified   
OS: Unspecified   
Whiteboard:
Fixed In Version: Doc Type: Bug Fix
Doc Text:
Story Points: ---
Clone Of: Environment:
Last Closed: Type: ---
Regression: --- Mount Type: ---
Documentation: --- CRM:
Verified Versions: Category: ---
oVirt Team: --- RHEL 7.3 requirements from Atomic Host:
Cloudforms Team: --- Target Upstream Version:
Attachments:
Description Flags
overlapped_buttons
none
UI
none
no overlapping
none
ovelap ui
none
With "width: 350px"
none
long_name none

Description Shveta 2012-01-13 07:48:17 UTC
Created attachment 555003 [details]
overlapped_buttons

Description of problem:


Version-Release number of selected component (if applicable):


How reproducible:


Steps to Reproduce:
1. Environments --> Images --> Import Image
2. Import image for Vsphere (factory-image-031ad91f-d102-4072-8dff-0a6e7dbfa3ab)
3. Continue  
4. In UI the buttons are overlapped because of long name of image
  
Actual results:


Expected results:


Additional info:

rpm -qa|grep aeolus
aeolus-conductor-0.8.0-5.el6.noarch
aeolus-configure-2.5.0-4.el6.noarch
aeolus-conductor-doc-0.8.0-5.el6.noarch
aeolus-all-0.8.0-5.el6.noarch
rubygem-aeolus-cli-0.3.0-3.el6.noarch
rubygem-aeolus-image-0.3.0-2.el6.noarch
aeolus-conductor-daemons-0.8.0-5.el6.noarch

Comment 1 Shveta 2012-01-13 07:49:27 UTC
Created attachment 555004 [details]
UI

Comment 3 Matt Wagner 2012-01-25 14:47:02 UTC
Pushed to candy mountain:

commit 8e3f29a121e80dbd2258ca780209ef5dc0c0126c
Author: Matt Wagner <matt.wagner>
Date:   Tue Jan 24 11:35:21 2012 -0500

    BZ781286 - Set max-width on admin-page-header h1
    
    Fixes issues with h1 overlapping other controls in the admin header.
    
    Resolves https://bugzilla.redhat.com/show_bug.cgi?id=781286

Comment 4 Steve Linabery 2012-01-26 16:48:24 UTC
8e3f29a in aeolus-conductor-0.8.0-12

Comment 5 Aziza Karol 2012-02-02 06:51:50 UTC
No Overlapped UI when importing image with long name.
see attached screesnhot.

verified on:
rpm -qa | grep aeolus
rubygem-aeolus-image-0.3.0-7.el6.noarch
aeolus-conductor-doc-0.8.0-17.el6.noarch
rubygem-aeolus-cli-0.3.0-7.el6.noarch
aeolus-configure-2.5.0-11.el6.noarch
aeolus-conductor-daemons-0.8.0-17.el6.noarch
aeolus-all-0.8.0-17.el6.noarch
aeolus-conductor-0.8.0-17.el6.noarch

Comment 6 Aziza Karol 2012-02-02 06:52:32 UTC
Created attachment 558980 [details]
no overlapping

Comment 7 Aziza Karol 2012-02-02 06:57:18 UTC
Overlapping still observed.
see attached screenshot.

rpm -qa | grep aeolus
rubygem-aeolus-image-0.3.0-7.el6.noarch
aeolus-conductor-doc-0.8.0-17.el6.noarch
rubygem-aeolus-cli-0.3.0-7.el6.noarch
aeolus-configure-2.5.0-11.el6.noarch
aeolus-conductor-daemons-0.8.0-17.el6.noarch
aeolus-all-0.8.0-17.el6.noarch
aeolus-conductor-0.8.0-17.el6.noarch

Comment 8 Aziza Karol 2012-02-02 06:57:52 UTC
Created attachment 558982 [details]
ovelap ui

Comment 9 Matt Wagner 2012-02-02 20:44:46 UTC
I see the commit in the repo, but I'm not finding the change actually in the file. I think it may have been overwritten at some point.

Comment 10 Matt Wagner 2012-02-02 21:00:34 UTC
Oh, disregard the above. It's there.

The problem is that I set a max-width of 490px, but with the new names, which are longer, that is now still too much.

I was able to make the h1 (app-wide) have a "width: 350px" attribute that "fixes" this problem, but it introduces new problems by making the width absurdly narrow where there's no need. (I'm attaching a new screenshot showing this.)

As a slight improvement, I think I could target that to only "h1.images" here, but that feels like a hack.

I think what we really need is a CSS Guru who can find a graceful solution here, to permit the h1 to extend until it runs into other content, and then begin to wrap. Unfortunately, I am not a CSS guru by any stretch.

Comment 11 Matt Wagner 2012-02-02 21:01:31 UTC
Oh, disregard the above. It's there.

The problem is that I set a max-width of 490px, but with the new names, which are longer, that is now still too much.

I was able to make the h1 (app-wide) have a "width: 350px" attribute that "fixes" this problem, but it introduces new problems by making the width absurdly narrow where there's no need. (I'm attaching a new screenshot showing this.)

As a slight improvement, I think I could target that to only "h1.images" here, but that feels like a hack.

I think what we really need is a CSS Guru who can find a graceful solution here, to permit the h1 to extend until it runs into other content, and then begin to wrap. Unfortunately, I am not a CSS guru by any stretch.

Comment 12 Matt Wagner 2012-02-02 21:03:56 UTC
Created attachment 559132 [details]
With "width: 350px"

This screenshot shows another page, where the buttons take up less room. Here, a 350-px width leaves the page looking kind of ridiculous.

Comment 13 Matt Wagner 2012-02-02 21:14:45 UTC
On the images page specifically, Ken and I had discussed the option of moving most of the buttons out of the header. We could do that here, but that leaves this page oddly inconsistent.

Comment 14 Matt Wagner 2012-02-16 20:25:11 UTC
I sent a (quick-fix) patch to the list: http://lists.fedorahosted.org/pipermail/aeolus-devel/2012-February/008920.html

Comment 15 Steve Linabery 2012-02-20 20:55:27 UTC
a3df89b in aeolus-conductor-0.8.0-30

Comment 16 Matt Wagner 2012-02-20 21:19:18 UTC
There's also another update here that was just recently pushed:

commit b4b4be6f8afad2dcc589485763e2b55e61d3ddde
Author: Matt Wagner <matt.wagner>
Date:   Thu Feb 16 15:17:07 2012 -0500

    BZ 781286 - Fix overlapping H1 with long image names

Comment 17 Shveta 2012-02-21 11:21:38 UTC
Created attachment 564653 [details]
long_name

Comment 18 Shveta 2012-02-21 11:23:48 UTC
Verified with

rpm -qa|grep aeolus
aeolus-conductor-0.8.0-28.el6.noarch
aeolus-conductor-daemons-0.8.0-28.el6.noarch
aeolus-conductor-doc-0.8.0-28.el6.noarch
rubygem-aeolus-image-0.3.0-7.el6.noarch
aeolus-all-0.8.0-28.el6.noarch
rubygem-aeolus-cli-0.3.0-8.el6.noarch
aeolus-configure-2.5.0-14.el6.noarch