Today when WRITING the home page of PC mall, I found a headache problem. The requirement is to click the message list on the home page of mall to pop up a pop-up box, which uses the Element E-Dialog component. When the pop-up box appears, the whole page will shift to the right. Does the e-Dialog insert itself into the body element? Then I add append-to-body=”true”, CTRL + S Strange? The padding-right:17px appears on the body when the popbox appears. The popbox disappears and the padding-right:17px is hidden.

First, causes

There are two reasons for the bug of e-Dialog that causes the page to move left and the screen to shake:

By default, the framework adds a padding-right style of 17px to the body when displaying the e-Dialog modal box

2. Modal-open overflow: Hidden causes the original scroll bar to disappear and the window to resize, causing the screen to shake.

Second, solutions

  • inindex.cssorapp.vueThe main entrance adds:
body { padding-right: 0px ! important; } .modal-open { overflow-y: scroll; padding-right: 0 ! Important; }Copy the code