diff options
| author | Gloria Gu <gfgu@suse.com> | 2019-09-10 19:54:56 -0700 |
|---|---|---|
| committer | Gloria Gu <gfgu@suse.com> | 2019-10-01 16:29:39 +0000 |
| commit | 79ab546960670ecbfa9299258ef6ac40c645a1ff (patch) | |
| tree | 74b13c00cbb0e5faf6bef24f5dee638827f96f6b | |
| parent | dc6b68cfbd15d2273c497f8ee5764ad5315adf08 (diff) | |
| download | horizon-79ab546960670ecbfa9299258ef6ac40c645a1ff.tar.gz | |
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
(cherry picked from commit b635e625f75744938cde49fd250dd1a5f36ca1b7)
(cherry picked from commit 6b9ddde90096be58510f3e99e81a04211d8f66b4)
| -rw-r--r-- | openstack_dashboard/static/dashboard/scss/_variables.scss | 2 | ||||
| -rw-r--r-- | openstack_dashboard/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 ead18c0b0..fbe0bda52 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 2a207bb04..cc0ad7f78 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; |