search

vuematerial / vue-material

Vue.js Framework - ready-to-use Vue components with Material Design, free forever.
https://www.creative-tim.com/vuematerial
MIT License
9.88k stars 1.16k forks source link

dialogs position not centered #2209

Closed JenGL closed 4 years ago

JenGL commented 4 years ago

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

jaimesemp commented 4 years ago

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"
vonBarbarosa commented 4 years ago

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

dragosct commented 4 years ago

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!

gaaytrimaa commented 4 years ago

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.

pfraces commented 4 years ago

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

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

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 4 years ago

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