Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] - Modal - size="full" not working correctly with scrollBehavior="inside" #2681

Closed
kodobrody opened this issue Apr 10, 2024 · 2 comments · Fixed by #2684
Closed

[BUG] - Modal - size="full" not working correctly with scrollBehavior="inside" #2681

kodobrody opened this issue Apr 10, 2024 · 2 comments · Fixed by #2684
Labels
🐛 Type: Bug Something isn't working

Comments

@kodobrody
Copy link

NextUI Version

2.2.10

Describe the bug

Hey, I just discovered that I can't have fullscreen modal with scrollable body. If I try to eg.

<Modal
        isOpen={isOpen}
        onOpenChange={onOpenChange}
        scrollBehavior="inside"
        size="full"
      >

it results in modal stopping being full screen.

Your Example Website or App

https://codesandbox.io/p/devbox/heuristic-jasper-4hd333?file=%2FApp.jsx%3A24%2C19

Steps to Reproduce the Bug or Issue

When using modal add both props size="full" and scrollBehavior="inside"

Expected behavior

Modal should stay fullscreen

Screenshots or Videos

image

Operating System Version

Windows

Browser

Chrome

@kodobrody kodobrody added the 🐛 Type: Bug Something isn't working label Apr 10, 2024
Copy link

linear bot commented Apr 10, 2024

@ShrinidhiUpadhyaya
Copy link
Contributor

When scrollBehavior="inside" is set, 7.5rem is reduced from the total height

inside: {
       base: "max-h-[calc(100%_-_7.5rem)]",
       body: "overflow-y-auto",
     },

Maybe there is some design decision taken for that calculation, but the below code can fix this bug

  inside: {
        base: "max-h-full",
        body: "overflow-y-auto",
      },

Note:- If needed i could generate a PR for this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐛 Type: Bug Something isn't working
Projects
None yet
2 participants