Modal jumps position when the viewport is resized #23672
Comments
|
I'm sorry @TechDavid but I don't see any issue in your jsfiddle, maybe I don't look where I should 🤔 I tried to resize my browser's window and check if they are a margin applied but that wasn't the case |
|
@Johann-S if you resize the view of the html output in the bottom right corner, after clicking the modal, it does hop left a little. |
|
As @ddvorak said. For the problem to occur the preview pane needs to be small enough for the lorem ipsum text to overflow, but large enough for the entire modal to fit, and then it needs to be resized in height. |
|
So just to clarify you can resize the preview pane in JSFiddle by dragging the bar between the CSS pane and the preview pane - sorry if you already know this! (I suppose you're more familiar with JSBin since that's what was suggested for making demos in the issue template). |
|
Ok so it's the |
|
Not exactly... it's the padding-right applied, but there's no scrollbar involved. Here's a video: https://www.useloom.com/share/efa1bc8aa6ce4215807bbeb830b0aa9c |
Building on bootstrap-vue#1058... If the modal dialog's content height changed (e.g., "v-if" conditionally displayed an error message), the `padding-right` could be applied inconsistently. twbs/bootstrap#23672 fixed this by calling `this.adjustDialog()` during `onBeforeEnter()`, as well
Building on #1058... If the modal dialog's content height changed (e.g., "v-if" conditionally displayed an error message), the `padding-right` could be applied inconsistently. twbs/bootstrap#23672 fixed this by calling `this.adjustDialog()` during `onBeforeEnter()`, as well
Demo: https://jsfiddle.net/techdavid/g89ts0rs/2/
When the viewport is adjusted, the modal gets a margin applied to it, making it jump position slightly to the left (once only).
For the problem to occur, the main page content needs to overflow but not the modal.
_adjustDialog()should be called when the modal opens initially so that this doesn't occur.The text was updated successfully, but these errors were encountered: