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.

Sign up for GitHub

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

Jump to bottom

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

Open
kodobrody opened this issue Apr 10, 2024 · 2 comments · May be fixed by #2684
Open

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

kodobrody opened this issue Apr 10, 2024 · 2 comments · May be 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
@linear Linear
Copy link

linear bot commented Apr 10, 2024

ENG-623 [BUG] - Modal - size="full" not working correctly with scrollBehavior="inside"

This was referenced Apr 11, 2024
Closed
Open
@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
Assignees
No one assigned
Labels
🐛 Type: Bug Something isn't working
Projects
None yet
Milestone
No milestone
2 participants
@ShrinidhiUpadhyaya @kodobrody