From b635e625f75744938cde49fd250dd1a5f36ca1b7 Mon Sep 17 00:00:00 2001 From: Gloria Gu Date: Tue, 10 Sep 2019 19:54:56 -0700 Subject: [PATCH] Updated max-width to be dynamic for .member class 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 --- openstack_dashboard/static/dashboard/scss/_variables.scss | 2 +- .../static/dashboard/scss/components/_membership.scss | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/openstack_dashboard/static/dashboard/scss/_variables.scss b/openstack_dashboard/static/dashboard/scss/_variables.scss index ead18c0b02..fbe0bda527 100644 --- a/openstack_dashboard/static/dashboard/scss/_variables.scss +++ b/openstack_dashboard/static/dashboard/scss/_variables.scss @@ -72,7 +72,7 @@ $members-list-border: 1px solid $gray-light !default; // TODO: These values are hardcoded lengths but they are actually // very dependant on the modal size set in the theme. We need // 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-roles-width: 125px !default; diff --git a/openstack_dashboard/static/dashboard/scss/components/_membership.scss b/openstack_dashboard/static/dashboard/scss/components/_membership.scss index 2a207bb044..cc0ad7f78c 100644 --- a/openstack_dashboard/static/dashboard/scss/components/_membership.scss +++ b/openstack_dashboard/static/dashboard/scss/components/_membership.scss @@ -102,7 +102,6 @@ background-color: $link-hover-color; } } - .member, .role_options .roles_display { overflow: hidden; text-overflow: ellipsis; @@ -112,6 +111,8 @@ padding-right: 0; padding-left: $padding-base-vertical; max-width: $members-list-item-width; + overflow: hidden; + overflow-wrap: break-word; // In case it is really long } .role_options { margin-left: 0;