From 2adc449e62504a4e517ca494c544f5f9ac7cf2e5 Mon Sep 17 00:00:00 2001 From: Jen Downs Date: Fri, 22 Nov 2019 11:49:25 -0600 Subject: [PATCH 1/2] fix(multi-select): update filterable styles for long selection numbers --- .../src/components/multi-select/_multi-select.scss | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/components/src/components/multi-select/_multi-select.scss b/packages/components/src/components/multi-select/_multi-select.scss index 0c6a445f80f7..f40aa1b6b57f 100644 --- a/packages/components/src/components/multi-select/_multi-select.scss +++ b/packages/components/src/components/multi-select/_multi-select.scss @@ -45,12 +45,9 @@ color: $text-01; } - .#{$prefix}--multi-select--filterable { - .#{$prefix}--list-box__selection--multi { - position: absolute; - left: $carbon--spacing-03; - right: auto; - } + .#{$prefix}--multi-select--filterable.#{$prefix}--multi-select + .#{$prefix}--text-input { + padding-left: $carbon--spacing-03; } .#{$prefix}--multi-select--selected .#{$prefix}--text-input { From a08f4f39b90793e5f116ad059338cd0ace92c144 Mon Sep 17 00:00:00 2001 From: Jen Downs Date: Fri, 22 Nov 2019 13:20:08 -0600 Subject: [PATCH 2/2] fix(multi-select): adjust list box margins --- .../src/components/multi-select/_multi-select.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/components/src/components/multi-select/_multi-select.scss b/packages/components/src/components/multi-select/_multi-select.scss index f40aa1b6b57f..04c82dac429d 100644 --- a/packages/components/src/components/multi-select/_multi-select.scss +++ b/packages/components/src/components/multi-select/_multi-select.scss @@ -50,6 +50,12 @@ padding-left: $carbon--spacing-03; } + .#{$prefix}--multi-select--filterable + .#{$prefix}--list-box__selection--multi { + margin-left: $carbon--spacing-03; + margin-right: $carbon--spacing-01; + } + .#{$prefix}--multi-select--selected .#{$prefix}--text-input { // this value will need to change based on the number of digits in // the number of items selected