| Summary: | Misrendered UI when deployable description is too long | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Product: | [Retired] CloudForms Cloud Engine | Reporter: | Shveta <ssachdev> | ||||||
| Component: | aeolus-conductor | Assignee: | Tzu-Mainn Chen <tzumainn> | ||||||
| Status: | CLOSED ERRATA | QA Contact: | wes hayutin <whayutin> | ||||||
| Severity: | high | Docs Contact: | |||||||
| Priority: | unspecified | ||||||||
| Version: | 1.0.0 | CC: | akarol, deltacloud-maint, hbrock, jtomasek, kenkeiter, ssachdev, tzumainn | ||||||
| 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: | 2012-05-15 22:15:36 UTC | Type: | --- | ||||||
| Regression: | --- | Mount Type: | --- | ||||||
| Documentation: | --- | CRM: | |||||||
| Verified Versions: | Category: | --- | |||||||
| oVirt Team: | --- | RHEL 7.3 requirements from Atomic Host: | |||||||
| Cloudforms Team: | --- | Target Upstream Version: | |||||||
| Attachments: |
|
||||||||
This fix can be done purely with CSS.
I'll walk you through the solution.
We can limit the length a number of ways but first we need to set a fixed area for the description
eg:
.description{
display: block;
max-width:(foo)px;
max-height:(bar)px;
}
now we have two choices for how we hide the additional description. via simply cutting it off or allowing a scrollable area. (i'd avise strongly against the scrollable area)
to do a nice cut-off (after we have set max-width; max-height) we can do the following.
.description{
overflow: hidden;
overflow: ellipse;
}
this will hide the additional parts of the description and ellipse the overflowing content if that is supported by the current browser.
however if we want to allow the user to scroll through the entire description we can do
.description{
overflow: auto;
}
This will add scrollbars to the fixed area for the overflowing text... (not recommended but possible)
how would you like to proceed ?
I think scroll bar would not be good idea . We can either cut the description and show first some words of the description followed by "..." OR we can show the entire description but the "details" and "select" button should remain alligned with the button of other rows. that means they remain in the same column and do not shift with long description. The best solution is the first one Andrew Fitzsimon recommended:
.description{
display: block;
max-width:(foo)px;
max-height:(bar)px;
}
Patch created (based on Andy's comments): https://fedorahosted.org/pipermail/aeolus-devel/2012-February/008628.html I think nice solution should be to display the first line of the description in closed state and to display whole description in the div which shows up after clicking details link. (put it in <p/> before the table). To limit first line of the description use:
.description{
width: 300px; //or maybe a bit more, max-width isn't necessary and width is supported by all browsers
white-space: nowrap; //make it only one line
overflow: hidden;
text-overflow: ellipsis;
}
Pushed to 1.0-staging: commit caa10892e72c5620eadfd8946a6104cbc820b7e5 BZ 783075 added deployable.description to collapsed details for full display commit 4a7ef23a42bdf0b7546623b8116ee0b511a7424a BZ 783075 updated css for long description on deployments/launch_from_catalog Created attachment 560929 [details]
deployable_desc
verified w/ rpm -qa|grep aeolus aeolus-conductor-doc-0.8.0-25.el6.noarch aeolus-conductor-daemons-0.8.0-25.el6.noarch aeolus-configure-2.5.0-12.el6.noarch rubygem-aeolus-cli-0.3.0-8.el6.noarch rubygem-aeolus-image-0.3.0-7.el6.noarch aeolus-all-0.8.0-25.el6.noarch aeolus-conductor-0.8.0-25.el6.noarch Since the problem described in this bug report should be resolved in a recent advisory, it has been closed with a resolution of ERRATA. For information on the advisory, and where to find the updated files, follow the link below. If the solution does not work for you, open a new bug report. http://rhn.redhat.com/errata/RHEA-2012-0583.html |
Created attachment 556221 [details] long_desc Description of problem: Version-Release number of selected component (if applicable): How reproducible: Steps to Reproduce: 1. Create a new deployable 2. Give a long description 3. Save 4. Pools --> Launch instance via deployable All deployables are listed. But the UI is bad because of long description. May be we can limit showing description to a certain number of chars . Actual results: Expected results: Additional info: rpm -qa|grep aeolus aeolus-conductor-0.8.0-8.el6.noarch aeolus-conductor-daemons-0.8.0-8.el6.noarch rubygem-aeolus-image-0.3.0-3.el6.noarch rubygem-aeolus-cli-0.3.0-4.el6.noarch aeolus-all-0.8.0-8.el6.noarch aeolus-configure-2.5.0-5.el6.noarch aeolus-conductor-doc-0.8.0-8.el6.noarch