search

anseki / jquery-plainmodal

The simple jQuery Plugin for fully customizable modal windows.
http://anseki.github.io/jquery-plainmodal/
MIT License
78 stars 11 forks source link

Hack to remove the content jump when removing/adding scrollbar #12

Closed NetVicious closed 7 years ago

NetVicious commented 7 years ago

Hi! I saw your library as others have the problem of content horizontal jumping when the vertical scrollbar appears/disappears.

I fix this ugly jump with some padding on the body (which should have box-sizing: border-box in it's css).

$('#obj').plainModal('open', { beforeopen: function(event) { $("body").css('padding-right', window.innerWidth - document.body.clientWidth + 'px') }, close: function() { ..... $("body").css('padding-right', ""); } });

I think it could be a good thing to add these little hack directly in the library.

anseki commented 7 years ago

Hi @NetVicious, thank you for the comment.

jQuery.plainModal already has the feature which adjusts for the size of hidden vertical/horizontal scrollbars. It calculates the width and height of vertical/horizontal scrollbars correctly, and it pads those. For example, in this page https://anseki.github.io/jquery-plainmodal/, the margin is added to the body when you click the "Open Sample" button. Do you mean that this feature did not work? Sorry, my English is poor.

anseki commented 7 years ago

BTW, the window.innerWidth - document.body.clientWidth in your example code can not get a correct size of the scroll bar because it ignores margin and padding of <html> and <body>, and it sets only that value without original padding-right, and it clears padding-right (original value is removed) when the modal window is closed. And also, the vertical scroll bar might be shown on the left side of the window (i.e. not padding-right), and the horizontal scroll bar might be shown on the up side. The "document mode" (i.g. RTL) decides the position of scroll bars.

NetVicious commented 7 years ago

Yes, I understand. I posted you the fix I used on my website.

In my case the default fix of plainTest didn't worked. I don't know if my CSS breaks something in your code.,

This it's the CSS I use for html and body:

html { height: 100%; width: 100%; } body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; background-color: #348781; width: 100%; height: 100%; margin: 0; padding: 0; box-sizing: border-box; }

The last box-sizing was added to allow my fix to work.

On Wed, Apr 5, 2017 at 8:00 PM, anseki notifications@github.com wrote:

BTW, the window.innerWidth - document.body.clientWidth in your example code can not get a correct size of the scroll bar because it ignores margin and padding of and , and it sets only that value without original padding-right, and it clears padding-right (original value is removed) when the modal window is closed. And also, the vertical scroll bar might be shown on the left side of the window (i.e. not padding-right), and the horizontal scroll bar might be shown on the up side. The "document mode" (i.g. RTL) decides the position of scroll bars.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/anseki/jquery-plainmodal/issues/12#issuecomment-291945003, or mute the thread https://github.com/notifications/unsubscribe-auth/AADnpv6qRe0s_AmoJ5FMtSgRHxAM9t60ks5rs9a3gaJpZM4M0hZO .

-- .. //\/ e t . \/ i c i o u s ..

anseki commented 7 years ago

That is, do you mean that this feature of jQuery.plainModal did not work? Also, what is "plainTest" ?

If the "scrollbar-adjusting" doesn't work with your CSS code above, try to remove body { width: 100%; height: 100%; }. These styles disable the scrollbar-adjusting because jQuery.plainModal adjusts size of the body. When you specify width and height of body, of course jQuery.plainModal can't adjust that.

anseki commented 7 years ago

No reply came, and I close this issue.