EZP-32166: Base translation dropdown single selection issue (#1689)

ezsystems · Jan 13, 2021 · 0379867 · 0379867
1 parent 756ca04
commit 0379867
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 5 deletions.
diff --git a/src/bundle/Resources/public/js/scripts/core/custom.dropdown.js b/src/bundle/Resources/public/js/scripts/core/custom.dropdown.js
@@ -1,6 +1,6 @@
 (function(global, doc, eZ) {
     const CLASS_CUSTOM_DROPDOWN = 'ez-custom-dropdown';
-    const CLASS_CUSTOM_DROPDOWN_ITEM = 'ez-custom-dropdown__item';
+    const CLASS_CUSTOM_DROPDOWN_OVERFLOW = 'ez-custom-dropdown--overflow';
     const CLASS_ITEMS_HIDDEN = 'ez-custom-dropdown__items--hidden';
     const CLASS_ITEMS_POSITION_TOP = 'ez-custom-dropdown__items--position-top';
     const CLASS_REMOVE_SELECTION = 'ez-custom-dropdown__remove-selection';
@@ -209,10 +209,10 @@
                 selectedItems.forEach((item) => {
                     item.hidden = false;
                 });
-                selectedItems.forEach((item) => {
+                selectedItems.forEach((item, index) => {
                     itemsWidth += item.offsetWidth;
 
-                    if (itemsWidth > selectedItemsContainer.offsetWidth - restrictedAreaItemsContainer) {
+                    if (index !== 0 && itemsWidth > selectedItemsContainer.offsetWidth - restrictedAreaItemsContainer) {
                         numberOfOverflowItems++;
                         item.hidden = true;
                     }
@@ -221,8 +221,10 @@
                 if (numberOfOverflowItems) {
                     selectedItemsOverflow.hidden = false;
                     selectedItemsOverflow.innerHTML = numberOfOverflowItems;
+                    this.container.classList.add(CLASS_CUSTOM_DROPDOWN_OVERFLOW);
                 } else {
                     selectedItemsOverflow.hidden = true;
+                    this.container.classList.remove(CLASS_CUSTOM_DROPDOWN_OVERFLOW);
                 }
             }
         }

diff --git a/src/bundle/Resources/public/scss/_add-translation.scss b/src/bundle/Resources/public/scss/_add-translation.scss
@@ -1,8 +1,11 @@
 .ez-translation {
     .ez-custom-dropdown {
-        &__selection-info,
-        &__items {
+        &__wrapper {
             width: 60%;
         }
+
+        &__items {
+            width: 100%;
+        }
     }
 }
diff --git a/src/bundle/Resources/public/scss/core/_custom.dropdown.scss b/src/bundle/Resources/public/scss/core/_custom.dropdown.scss
@@ -182,4 +182,10 @@
             margin-bottom: calculateRem(-2px);
         }
     }
+
+    &--overflow {
+        .ez-custom-dropdown__selected-item {
+            max-width: calc(100% - #{calculateRem(96px)});
+        }
+    }
 }