reactjsmodal-dialogportal

Overflow outside React portal dialog

I defined a base dialog for my dialogs using React createPortal and I am using react-select for my forms. In normal elements it works fine, but when I use it in a portal the options overflow result in a dialog scroll:

enter image description here

I am wondering if there is a way to render the options below the dialog border, in order to not have the scroll on the dialog.

Solution

  • To prevent the overflow, just render the portal of the <Select /> outside of your modal.

    
<Select
  menuPortalTarget={document.body} // Render the portal in the body
  menuPosition="fixed" // Keep the dropdown fixed
  styles={{
    menu: (base) => ({
      ...base,
      zIndex: 100000, // make this zIndex higher than your dialog's zIndex
    }),
    menuPortal: (base) => ({
      ...base,
      zIndex: 100000, // make this zIndex higher than your dialog's zIndex
    }),
  }}
/>