Search code examples
javascriptcssreactjsresponsive-designreact-modal

max-width with absolute positioning

Im using a library called react-modal and im trying to accomplish something like thiskinda how I want it to look

now I want to have this (sideModal lets call it) be 50% of the screen ONLY up untill a certain point when then I want its max width to be 15rem but it to still be attached to the side of the screen

const customStyles = {
  content: {
    top: 0,
    bottom: 0,
    right: "-50%",
    left: "50%",
    borderRadius: "none",
    // maxWidth: "15rem", if I uncomment this when Modal gets to 15rem it floats away from left of screen
  },
  overlay: {
    background: "rgba(22, 54, 84, 0.6)",
  },
};

this is what I have so far and it successfully keeps the modal at 50% of the screen size BUT if I uncomment out the maxWidth, when the modal gets to 15rem it will start to float away from the right side and into the center of the screen -----> NOTE -----> (I saw an answer saying to use an inner container in order to control the width better, and if anyone knows how to do that with react-modal then im down, but for now I have no idea how to do that so any OTHER way to do this would be appreciated) thanks.EDIT: Ive skimmed theu react-modal docs and it seems I cant do the inner container idea

Solution

  • To make this side modal, don't set left. Instead, set right and give it your desired width:

    content: {
  top: 0,
  bottom: 0,
  right: 0,
  width: '50%',
  maxWidth: '15rem',
  borderRadius: "none",
}