diff --git a/frontend/src/metadata/components/popover/column-popover/dropdown-menu/index.js b/frontend/src/metadata/components/popover/column-popover/dropdown-menu/index.js
index e3294ef167..1f06de952f 100644
--- a/frontend/src/metadata/components/popover/column-popover/dropdown-menu/index.js
+++ b/frontend/src/metadata/components/popover/column-popover/dropdown-menu/index.js
@@ -189,62 +189,60 @@ const CustomDropdownMenu = ({ column, modifiers, onSelect }) => {
   }, [onSelect]);
 
   return (
-    <ModalPortal>
-      <DropdownMenu className="sf-metadata-column-type-dropdown-menu" modifiers={modifiers}>
-        <div className="search-column-container">
-          <Input onChange={onSearchColumn} placeholder={gettext('Search properties')} value={searchValue} onClick={onSearchClick} ref={inputRef} />
-        </div>
-        {displayColumns.length > 0 && predefinedColumns.length > 0 && (
-          <>
-            {predefinedColumns.map(item => (
-              <DropdownItem
-                key={item.key}
-                className={classnames('column-type-item text-truncate', { 'active': item.key === column?.key })}
-                onMouseEnter={() => setCustomPropertiesOpen(false)}
-                onClick={() => handleSelect(item)}
+    <DropdownMenu className="sf-metadata-column-type-dropdown-menu" modifiers={modifiers} style={{ zIndex: 1061 }}>
+      <div className="search-column-container">
+        <Input onChange={onSearchColumn} placeholder={gettext('Search properties')} value={searchValue} onClick={onSearchClick} ref={inputRef} />
+      </div>
+      {displayColumns.length > 0 && predefinedColumns.length > 0 && (
+        <>
+          {predefinedColumns.map(item => (
+            <DropdownItem
+              key={item.key}
+              className={classnames('column-type-item text-truncate', { 'active': item.key === column?.key })}
+              onMouseEnter={() => setCustomPropertiesOpen(false)}
+              onClick={() => handleSelect(item)}
+            >
+              <Icon symbol={item.icon} className="sf-metadata-icon" />
+              <span>{item.name}</span>
+            </DropdownItem>
+          ))}
+          {basicsColumns.length > 0 && (
+            <>
+              <DropdownItem className="w-100" divider />
+              <Dropdown
+                className="w-100"
+                direction="end"
+                isOpen={isCustomPropertiesOpen}
+                toggle={toggleCustomProperties}
+                onMouseEnter={() => setCustomPropertiesOpen(true)}
+                onMouseMove={(e) => {e.stopPropagation();}}
               >
-                <Icon symbol={item.icon} className="sf-metadata-icon" />
-                <span>{item.name}</span>
-              </DropdownItem>
-            ))}
-            {basicsColumns.length > 0 && (
-              <>
-                <DropdownItem className="w-100" divider />
-                <Dropdown
-                  className="w-100"
-                  direction="end"
-                  isOpen={isCustomPropertiesOpen}
-                  toggle={toggleCustomProperties}
-                  onMouseEnter={() => setCustomPropertiesOpen(true)}
-                  onMouseMove={(e) => {e.stopPropagation();}}
+                <DropdownToggle
+                  tag='span'
+                  className="column-type-item dropdown-item text-truncate d-flex align-items-center"
                 >
-                  <DropdownToggle
-                    tag='span'
-                    className="column-type-item dropdown-item text-truncate d-flex align-items-center"
-                  >
-                    <Icon symbol="edit" className="sf-metadata-icon" />
-                    <span className="mr-auto">{gettext('Custom properties')}</span>
-                    <i className="sf3-font-down sf3-font rotate-270"></i>
-                  </DropdownToggle>
-                  <DropdownMenu container="body" style={{ zIndex: 1061 }}>
-                    {basicsColumns.map((item, index) => (
-                      <DropdownItem
-                        key={index}
-                        className={classnames('column-type-item text-truncate', { 'active': item.key === column?.key })}
-                        onClick={() => handleSelect(item)}
-                      >
-                        <Icon symbol={item.icon} className="sf-metadata-icon" />
-                        <span>{item.name}</span>
-                      </DropdownItem>
-                    ))}
-                  </DropdownMenu>
-                </Dropdown>
-              </>
-            )}
-          </>
-        )}
-      </DropdownMenu>
-    </ModalPortal>
+                  <Icon symbol="edit" className="sf-metadata-icon" />
+                  <span className="mr-auto">{gettext('Custom properties')}</span>
+                  <i className="sf3-font-down sf3-font rotate-270"></i>
+                </DropdownToggle>
+                <DropdownMenu>
+                  {basicsColumns.map((item, index) => (
+                    <DropdownItem
+                      key={index}
+                      className={classnames('column-type-item text-truncate', { 'active': item.key === column?.key })}
+                      onClick={() => handleSelect(item)}
+                    >
+                      <Icon symbol={item.icon} className="sf-metadata-icon" />
+                      <span>{item.name}</span>
+                    </DropdownItem>
+                  ))}
+                </DropdownMenu>
+              </Dropdown>
+            </>
+          )}
+        </>
+      )}
+    </DropdownMenu>
   );
 };
 
diff --git a/frontend/src/metadata/components/popover/column-popover/type/index.js b/frontend/src/metadata/components/popover/column-popover/type/index.js
index 6acfc5ce42..bf3c64785b 100644
--- a/frontend/src/metadata/components/popover/column-popover/type/index.js
+++ b/frontend/src/metadata/components/popover/column-popover/type/index.js
@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { gettext } from '../../../../../utils/constants';
 import CustomDropdownMenu from '../dropdown-menu';
+import ModalPortal from '../../../../../components/modal-portal';
 
 import './index.css';
 
@@ -54,16 +55,18 @@ const Type = forwardRef(({ column, onChange }, ref) => {
             <span className="mr-auto">{column.name}</span>
             <i className="sf3-font sf3-font-down" aria-hidden="true"></i>
           </DropdownToggle>
-          <CustomDropdownMenu
-            column={column}
-            modifiers={[{
-              name: 'offset',
-              options: {
-                offset: [0, 17],
-              }
-            }]}
-            onSelect={onChange}
-          />
+          <ModalPortal>
+            <CustomDropdownMenu
+              column={column}
+              modifiers={[{
+                name: 'offset',
+                options: {
+                  offset: [0, 17],
+                }
+              }]}
+              onSelect={onChange}
+            />
+          </ModalPortal>
         </Dropdown>
         {error && (<FormFeedback>{error}</FormFeedback>)}
       </FormGroup>