1

Im trying to make my modal (react-modal node package) scrollable (There is an img inside)

here is my code:

  content: {
    position: 'absolute',
    backgroundColor: '#FFF',
    padding: '15px',
    zIndex: '1000',
    width: '90%',
    borderRadius: '.5em',
  },
  overlay: {
    position: 'fixed',
    display: 'flex',
    justifyContent: 'center',
    top: '0',
    left: '0',
    width: '100%',
    height: '100%',
    backgroundColor: 'rgba(0,0,0, .8)',
    zIndex: '1000',
    overflowY: 'auto',
  },
}

Modal.setAppElement('#__next')

export const langContext = React.createContext()

export default function Home() {
  const [isEn, setIsEn] = useState(true)
  const [modalIsOpen, setIsOpen] = useState(false)
  const { width } = useWindowDimensions()

  function openModal() {
    setIsOpen(true)
  }

  function closeModal() {
    setIsOpen(false)
  }

  function updateLang() {
    setIsEn((isEn) => !isEn)
  }
  return (
    <langContext.Provider value={{ isEn, updateLang }}>
      <div id="modal" className="overflow-hidden relative">
        <Header />
        <Modal
          isOpen={modalIsOpen}
          onRequestClose={closeModal}
          style={customStyles}>
          <div className="relative m-h-[1000px] h-full w-full overflow-y-scroll">
            {isEn ? (
              <Image
                layout="fill"
                objectFit={width >= 750 ? 'fill' : ' cover'}
                quality={100}
                src={
                  width >= 750 ? '/assets/menu-en.png' : '/assets/Menu_en_m.png'
                }
                alt="Menu"
              />
            ) : (
              <Image
                layout="fill"
                objectFit={width >= 750 ? 'fill' : ' cover'}
                quality={100}
                src={
                  width >= 750 ? '/assets/menu-he.png' : '/assets/Menu_he_m.png'
                }
                alt="Menu"
              />
            )}
          </div>
        </Modal>
      </div>
    </langContext.Provider>
  )
}

Any ideas on how can I do it? (I'm trying to play with the overflow and position element but I can't find the proper solution

The scrolling suppose to happen on Mobile and the Image dimensions are: 550*1550 (I can resize it if necessary) Right now the image is cut

Thanks for the helpers!

enter image description here

Naveh Mevorach
  • 21
  • 5

1 Answers1

0

I think your modal is good in terms of vertical scrolling, but the problem has may come from this line

objectFit={width >= 750 ? 'fill' : 'cover'}

Your mobile dimension is 500*1550 which means the image will take object-fit:cover;

You can check object-fit:cover; definition here

The image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit

If you already check the dimension to load the device-respective image, you can remove the condition to check for cover.

object-fit:fill is sufficient for your case

The change can be

objectFit="fill"

Another potential problem I can see here that you have layout="fill" for that image which will make it absolute. The image container has relative which restricts the original size of your image.

To fix it, you may need to remove relative from the image container too.

Nick Vu
  • 14,512
  • 4
  • 21
  • 31