diff --git a/src/bundle/Resources/public/js/scripts/core/custom.dropdown.js b/src/bundle/Resources/public/js/scripts/core/custom.dropdown.js
index f583cc7cb0..ff4d2fe5b9 100644
--- a/src/bundle/Resources/public/js/scripts/core/custom.dropdown.js
+++ b/src/bundle/Resources/public/js/scripts/core/custom.dropdown.js
@@ -2,6 +2,7 @@
     const CLASS_CUSTOM_DROPDOWN = 'ez-custom-dropdown';
     const CLASS_CUSTOM_DROPDOWN_ITEM = 'ez-custom-dropdown__item';
     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';
     const CLASS_ITEM_SELECTED_IN_LIST = 'ez-custom-dropdown__item--selected';
     const SELECTOR_ITEM = '.ez-custom-dropdown__item';
@@ -10,6 +11,7 @@
     const SELECTOR_SELECTION_INFO = '.ez-custom-dropdown__selection-info';
     const SELECTOR_PLACEHOLDER = '[data-value=""]';
     const EVENT_VALUE_CHANGED = 'valueChanged';
+    const ITEMS_LIST_MAX_HEIGHT = 300;
 
     class CustomDropdown {
         constructor(config) {
@@ -131,10 +133,19 @@
                 return;
             }
 
-            const methodName = this.itemsContainer.classList.contains(CLASS_ITEMS_HIDDEN) ? 'addEventListener' : 'removeEventListener';
+            const isListHidden = this.itemsContainer.classList.contains(CLASS_ITEMS_HIDDEN);
+            const bodyMethodName = isListHidden ? 'addEventListener' : 'removeEventListener';
+
+            if (isListHidden) {
+                const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+                const { top } = this.itemsContainer.getBoundingClientRect();
+                const itemsListMethodName = top + ITEMS_LIST_MAX_HEIGHT > viewportHeight ? 'add' : 'remove';
+
+                this.itemsContainer.classList[itemsListMethodName](CLASS_ITEMS_POSITION_TOP);
+            }
 
             this.itemsContainer.classList.toggle(CLASS_ITEMS_HIDDEN);
-            doc.body[methodName]('click', this.onClickOutside, false);
+            doc.body[bodyMethodName]('click', this.onClickOutside, false);
         }
 
         onOptionClick({ target }) {
diff --git a/src/bundle/Resources/public/scss/core/_custom.dropdown.scss b/src/bundle/Resources/public/scss/core/_custom.dropdown.scss
index 954f1ff653..f15d31cc6c 100644
--- a/src/bundle/Resources/public/scss/core/_custom.dropdown.scss
+++ b/src/bundle/Resources/public/scss/core/_custom.dropdown.scss
@@ -110,7 +110,7 @@
         top: 100%;
         transform: scaleY(1);
         transform-origin: top center;
-        transition: all 0.2s $ez-admin-transition;
+        transition: transform 0.2s $ez-admin-transition;
         width: 50%;
         border: calculateRem(1px) solid $ez-ground-primary;
         background: $ez-white;
@@ -121,6 +121,12 @@
         &--hidden {
             transform: scaleY(0);
         }
+
+        &--position-top {
+            top: initial;
+            bottom: 100%;
+            transform-origin: bottom center;
+        }
     }
 
     &__item {
diff --git a/src/bundle/Resources/public/scss/fieldType/edit/_ezselection.scss b/src/bundle/Resources/public/scss/fieldType/edit/_ezselection.scss
index b4ca0e3923..e494ee9c94 100644
--- a/src/bundle/Resources/public/scss/fieldType/edit/_ezselection.scss
+++ b/src/bundle/Resources/public/scss/fieldType/edit/_ezselection.scss
@@ -8,6 +8,8 @@
             &__items {
                 border: none;
                 box-shadow: 0 calculateRem(2px) calculateRem(4px) 0 rgba(0, 0, 0, 0.45);
+                max-height: calculateRem(300px);
+                overflow-y: auto;
             }
 
             &__item {