search

praveenjuge / kutty

Kutty is a tailwind plugin for building web applications. It has a set of accessible and reusable components that are commonly used in web applications.
https://kutty.netlify.app
MIT License
833 stars 44 forks source link

Open dialog creates scroll bar #30

Closed Destaq closed 3 years ago

Destaq commented 3 years ago

For a page that does not have a scroll bar, everything gets shifted slightly to the left when the dialog opens, as a scrollbar is created.

Before image

After image Note the white bar on the far right.

Is there any way to prevent this behavior?

Destaq commented 3 years ago

Additionally, the dialog does not close when clicking on any of the buttons, just by clicking outside of it. I have AlpineJS as a src script, on the @click="close" event listeners, but the documentation did not show how to implement the close method.

praveenjuge commented 3 years ago

I'll fix the scroll bar bug 👍

Can you share a minimal reproduction repo for the close event not working?

Destaq commented 3 years ago

@praveenjuge Done. https://github.com/Destaq/broken-kutty-dialog

  1. npm i
  2. npm run build:css
  3. npm run serve = you can click outside the dialog to close it, but not on the buttons...
Destaq commented 3 years ago

This also seems to be the case for another dynamic component, the drawer @praveenjuge . If you look at the drawer branch on the repo, you can see that it does not work as well. No popup shows, the page only dims.

praveenjuge commented 3 years ago

Thanks, I'll take a look

Destaq commented 3 years ago

Thanks, I'll take a look

Thank you, I hope it can be resolved.

I tried cloning this repo: https://github.com/praveenjuge/kutty/issues/5 that did not use AlpineJS, and the dialog worked perfectly. However, since then the dialog has been changed and no longer works - this may be useful information to you.

Destaq commented 3 years ago

@praveenjuge I've done some digging and solved the problem, there was a name clash.

Fixed in this PR: https://github.com/praveenjuge/kutty/pull/31

Although the dialog creating scrollbar to the right still happens.

praveenjuge commented 3 years ago

Hey, I have fixed the issue in the latest commit.

You can check if it's working here: https://codepen.io/praveenjuge/pen/KKNdavv

I'll tag a release soon. Thanks for raising this issue!

Destaq commented 3 years ago

Works great, thanks for fixing and making Kutty!

praveenjuge commented 3 years ago

Fixed in release 0.5.0