x-trap.noscroll adds padding to root element #4365
-
|
Hi, I am currently working on a modal with alpine.js I have noticed that whenever I open the modal, x-trap.noscroll adds a padding to my html root tag when I close the modal it is removed again What is the reason for this and how can I fix it? Modal open: Modal closed: Would be cool if someone could help me with this problem. |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 4 replies
-
|
It has always been that way, as far as I remember but only if your page has a scrollbar before activating the trap. Because the trap sets overflow hidden, it makes the scrollbar disappear so the padding is to compensate that so your page doesn't "jump" sideways. |
Beta Was this translation helpful? Give feedback.
-
|
Okay, thanks for the information. Actually the padding is a way to much.🙈 that's why my page is jumping when I open the modal. |
Beta Was this translation helpful? Give feedback.
-
|
Ok, I was actually mistaken. The padding is calculated by alpine, not focus trap. You can find the code here: alpine/packages/focus/src/index.js Line 201 in ab743bc In theory, it should be the correct value |
Beta Was this translation helpful? Give feedback.
-
|
Okay, interesting. It doesn't seem to calculate properly for me, the page always jumps a little to the right. I could imagine that it is due to my styling. I just measured the scrollbar, it is exactly 17pxl |
Beta Was this translation helpful? Give feedback.
-
|
Just looked at the code:
x-trap.noscroll colides with |
Beta Was this translation helpful? Give feedback.
-
|
That's not really a collision. It's entirely intended. |
Beta Was this translation helpful? Give feedback.
Ok, I was actually mistaken. The padding is calculated by alpine, not focus trap. You can find the code here:
alpine/packages/focus/src/index.js
Line 201 in ab743bc
In theory, it should be the correct value