openstack/horizon
Code Issues Proposed changes

Updated max-width to be dynamic for .member class

Browse Source 
When member name is longer than $members-list-item-width
(130px) in members list (for example, project group in Edit
Project), current text-overflow will put ... (ellipsis) at
the end of the name and name will be truncated.

Updated the styling of .member class to make max-width
dynamic 80% and wrap the name in case it is really long.

Change-Id: Ic295a9b1e7fd3525c633d51a60054e713da6a657
Closes-bug: #1843480
This commit is contained in:
Gloria Gu 2019-09-10 19:54:56 -07:00
parent a96c6e34cf
commit b635e625f7
2 changed files with 3 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
openstack_dashboard/static/dashboard/scss/_variables.scss
View File

@ -72,7 +72,7 @@ $members-list-border: 1px solid $gray-light !default;
// TODO: These values are hardcoded lengths but they are actually // TODO: These values are hardcoded lengths but they are actually
// very dependant on the modal size set in the theme. We need // very dependant on the modal size set in the theme. We need
// to eventually readdress these and calculate them dynamically // to eventually readdress these and calculate them dynamically
$members-list-item-width: 130px !default; $members-list-item-width: 80% !default;
$members-list-item-max-width: 327px !default; $members-list-item-max-width: 327px !default;
$members-list-roles-width: 125px !default; $members-list-roles-width: 125px !default;

3
openstack_dashboard/static/dashboard/scss/components/_membership.scss
View File

@ -102,7 +102,6 @@
background-color: $link-hover-color; background-color: $link-hover-color;
} }
} }
.member,
.role_options .roles_display { .role_options .roles_display {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -112,6 +111,8 @@
padding-right: 0; padding-right: 0;
padding-left: $padding-base-vertical; padding-left: $padding-base-vertical;
max-width: $members-list-item-width; max-width: $members-list-item-width;
overflow: hidden;
overflow-wrap: break-word; // In case it is really long
} }
.role_options { .role_options {
margin-left: 0; margin-left: 0;