CODEWITHSUNDEEP
cssreactjs
Asking
Asking

Reputation: 4192

css Overflow on the modal window in React JS

I am using Radix UI to create a modal window:

<Dialog.Root>
    <Dialog.Trigger asChild>
      <button className="Button violet" size="large">
        Edit profile
      </button>
    </Dialog.Trigger>
    <Dialog.Portal>
      <Dialog.Content className="DialogContent" style={{ width: "unset" }}>
        <Dialog.Title className="DialogTitle">Edit profile</Dialog.Title>
        <div
          style={{ maxWidth: "300px", maxHeight: "150px", overflow: "auto" }}
        >
          <h1>teashabsjkdhkja</h1>
          <h1>teashabsjkdhkja</h1>
          <h1>teashabsjkdhkja</h1>
          <h1>teashabsjkdhkja</h1>
          <h1>teashabsjkdhkja</h1>
          <h1>teashabsjkdhkja</h1>
          <h1>teashabsjkdhkja</h1>
          <h1>teashabsjkdhkja</h1>
          <h1>teashabsjkdhkja</h1>
        </div>
        <div
          style={{ display: "flex", marginTop: 25, justifyContent: "flex-end" }}
        >
          <Dialog.Close asChild>
            <button className="Button green">Save changes</button>
          </Dialog.Close>
        </div>
        <Dialog.Close asChild>
          <button className="IconButton" aria-label="Close">
            <Cross2Icon />
          </button>
        </Dialog.Close>
      </Dialog.Content>
    </Dialog.Portal>
  </Dialog.Root>

When i resize the window from bottom to top over the modal, the Save changes button remains outside the modal, but i want to drag it at the top with the bottom window border.
Question: How to solve the issue?
demoL: https://codesandbox.io/s/flamboyant-hamilton-3bx0h3

Upvotes: 1

Views: 279

Answers (1)

John Li
John Li

Reputation: 7447

Assuming that the goal is to contain Button when resizing the window, perhaps try add display: flex and flex-direction: column to the DialogContent class in styles.css:

.DialogContent {
  display: flex;
  flex-direction: column;
  background-color: white;
  border-radius: 6px;
  box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
    hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw;
  max-width: 450px;
  max-height: 85vh;
  padding: 25px;
  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

Upvotes: 1

Related Questions