Open dialog creates scroll bar

[Destaq]

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

After

Note the white bar on the far right.

Is there any way to prevent this behavior?

[Destaq]

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]

I'll fix the scroll bar bug 👍

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

[Destaq]

@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]

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]

Thanks, I'll take a look

[Destaq]

Thanks, I'll take a look

Thank you, I hope it can be resolved.

I tried cloning this repo: #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]

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

Fixed in this PR: #31

Although the dialog creating scrollbar to the right still happens.

[praveenjuge]

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]

Works great, thanks for fixing and making Kutty!

[praveenjuge]

Fixed in release 0.5.0