Vue-material: dialogs position not centered

Created on 2 May 2020 · 7Comments · Source: vuematerial/vue-material

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

Source

JenGL

👍13

Most helpful comment

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

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

pfraces on 13 May 2020

👍4

All 7 comments

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"

jaimesemp on 3 May 2020

👍3

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 :)

vonBarbarosa on 5 May 2020

👍1

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!

dragosct10 on 5 May 2020

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.

gaaytrimaa on 6 May 2020

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

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

$pfraces picture$ pfraces on 13 May 2020

👍4

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 on 23 May 2020

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

JenGL on 23 May 2020

Was this page helpful?

0 / 5 - 0 ratings