vuematerial/vue-material

dialogs position not centered

JenGL opened this issue ยท 7 comments

JenGL commented

Steps to reproduce

open a md-dialog anywhere (also in your homepage)

Which browser?

tested on Chrome and Edge

What is expected?

The dialog should open centered in the page

What is actually happening?

The dialog opens not centered

Reproduction Link

https://vuematerial.io/components/dialog

Hi, I found this bug too. (Btw, full screen option for mobile on dialog is not working either).

For the moment, I am using the previous version, which works nice:

"vue-material": "1.0.0-beta-12" 

Hi, we came upon this bug too. We're currently using @jaimesemp approach to keep our app stable.

Apparently, the css that moves the dialog is:

.md-dialog-container { transform: translate(-50%,-50%);}

Which seems to be applied by this commit: a673139, from #2021

Maybe @hastom can help us understand how can we change it without breaking the issue it intented to fix :)

Hi guys! I think this line transform: translate(-50%,-50%) scale(1); should be removed, and after that everything will work fine. I will make a PR with the change and we will put this in the beta-14 release!

Hi guys! I think this line transform: translate(-50%,-50%) scale(1); should be removed, and after that everything will work fine. I will make a PR with the change and we will put this in the beta-14 release!

Sir, kindly update the website of https://vuematerial.io/components/dialog/ . The dialog is opening and moving to the top left corner of the screen and is not centered. Also due to this in large dialog boxes the content is getting hidden. This will make a bad impression to new developers visiting the website.
Thank you.

As a workaround, I'm using the following snippet to overwrite the transform

.md-dialog /deep/ .md-dialog-container {
  transform: none;
}
JenGL commented

I'd like to add that with the beta-13 I have a blink effect, I don't know exactly what adds this effect.... but using the beta12 I have not anymore...

JenGL commented

update: to fix the blinking behaviour i added transition-duration:unset to the md-dialog