Full row editing causing page to widen by a few pixels

bsuk

Hi,

I've had an annoying issue with page widths changing when scrollbars are present.
I believe this is a widely known problem, which appears to be easily solved by adding the CSS code:

html {
  overflow-y: scroll;
}

One unfortunate side effect however, is that when using the full row editing modal (in Editor), the page behind it now temporarily widens during editing, then visibly jumps back when the modal window is closed down again.

I've tried adding the above code to the various editor and bootstrap .css files (as well as just my main table page) to no avail.

Has anyone come across this, or knows of a way to prevent it from happening?
Many thanks!

allan

Hi,

Is what you are describing the effect that you can see on this page when you click the "New" button? The vertical scrollbar is removed while the Bootstrap modal is shown?

If so, that is an artefact of how Bootstrap displayed its modal. It will always set the html to overflow-y hidden to allow its modal's scrolling to float above the document.

Allan

bsuk

Hi Allan, thanks for responding.
Yes, that seems to be what's causing the issue.

When the modal is opened, the page "widens". In your example above, it only seems to affect your navigation bar, which temporarily moves a few pixels to the left, then back again after the edit.
On my page, it affects the table and other text on the page (including the title), though not my nav bar!

The strange thing is, this didn't happen before I introduced "overflow-y hidden", and it looked a lot better, as the page didn't move at all when the modal dialogue was opened and closed.
The issue occurs even when no scroll bars are present (as the overflow is presumably allowing for the extra spacing for the scroll bar).

Are you saying that it's not possible to fix this behaviour?
Fair enough if so, would just be good to know if there's a fix.

Cheers,

BSUK.

P.S.
Here is a video demonstrating the issue (link removed)

allan

Hi,

Thanks for the confirmation. This is a Bootstrap issue rather than Editor I'm afraid. You aren't the only one to question it.

This thread in the Bootstrap issues has a ton of information on the topic. It says that it was fixed in 3.2, although the example I linked to above is using 3.3.7.

It looks like it is possible to work around it with a bit of Javascript.

Allan

bsuk

Hi Allan,

Many thanks for pointing me in the right direction!
I used one of the solutions on that stackoverflow thread, which is working for me with pure CSS and no JS:

body {
padding-right:0px !important;
margin-right:0px !important;
}

Thanks again!

BSUK