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

ScrollBar issue if we toggle it from bottom of the screen #761

Closed
Alreadywinner opened this issue May 25, 2023 · 7 comments
Closed

ScrollBar issue if we toggle it from bottom of the screen #761

Alreadywinner opened this issue May 25, 2023 · 7 comments
Assignees
Labels
🐛 bug Something isn't working confirmed This bug was confirmed

Comments

@Alreadywinner
Copy link
Contributor

Alreadywinner commented May 25, 2023

Description
Flowbite modal removes the scroll bar forever if I toggle it from Flowbite footer component

To Reproduce
Steps to reproduce the behavior:

  1. Go on bottom of the screen to the footer area
  2. On footer press any button that toggle Modal
  3. Close the Modal and you will see the main page scroll bar remains hidden

Expected behavior
If I open the Modal it should hide the main scrollbar smoothly as it is doing but on closing the Modal it should display the scrollbar again.

Screenshots
Scroll to footer and Press on pressing terms and Condition button :
image

Modal Appears and Scrollbar is hidden:
image

Now on pressing cross icon the scrollbar remains hidden
image

System information:

  • Device:
  • Resolution:
  • OS:
  • Browser: Brave Browser
  • Version:

Project information:

  • Tailwind: 3.0.0
  • Flowbite: 1.4.7
  • Flowbite React: 0.1.2
  • Type: Vite React

Additional context
On Inspecting I found out that overflow:hidden property gets applied when I open up the modal, and on closing the modal the <body /> tag have the property overflow:auto with it I think this should not happen

@tulup-conner tulup-conner added 🐛 bug Something isn't working confirmed This bug was confirmed labels May 26, 2023
@tulup-conner
Copy link
Collaborator

Thank you. I can confirm this behavior and the cause is here: https://github.com/themesberg/flowbite-react/blob/main/src/components/Modal/Modal.tsx#L126

We have an open PR that will fix this in 1.0.0, but I would be happy to introduce this in an earlier release, since it's just a bug fix. If you're able to, it would be great if you could open a PR that literally just replaces that line by 'hidden' : ''.

@Alreadywinner
Copy link
Contributor Author

Alreadywinner commented May 26, 2023 via email

@Alreadywinner
Copy link
Contributor Author

Alreadywinner commented May 26, 2023 via email

@tulup-conner
Copy link
Collaborator

Check out the contributing guide: https://www.flowbite-react.com/docs/getting-started/contributing

@Alreadywinner
Copy link
Contributor Author

Alreadywinner commented May 26, 2023 via email

@Alreadywinner
Copy link
Contributor Author

@tulup-conner pull request is made and ready for review

@Alreadywinner
Copy link
Contributor Author

Fixed And Now it's working

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐛 bug Something isn't working confirmed This bug was confirmed
Projects
None yet
Development

No branches or pull requests

2 participants