Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

Open $materialDialog on a scrollable page at the end #249

Closed
ovidiubuligan opened this issue Sep 7, 2014 · 5 comments
Closed

Open $materialDialog on a scrollable page at the end #249

ovidiubuligan opened this issue Sep 7, 2014 · 5 comments

Comments

@ovidiubuligan
Copy link

I have a page which is vertically scrollable, and when the user is at the end of the page and does something ,I want to open a dialog there . The problem is that the dialog is oppened at the top of the page and not visible.
Are there any quick workarounds for this?

@ajoslin
Copy link
Contributor

ajoslin commented Sep 8, 2014

Hey @ovidiubuligan,

Could you post a plunkr or jsfiddle reproducing this?

The dialog should be appended to the rootElement of the application, which isn't a scrollable container (it's usually the <body>).

So even if your scrollable container is scrolled to the bottom, a dialog appended to the application's rootElement should still be in the center of the screen (the body isn't scrolled down, only your container is).

Again, an example is necessary. It's possible we may have to restrict the max-height and max-width of the body to 100%, since it sounds like the body may be stretching to fit your scroll container inside.

@ovidiubuligan
Copy link
Author

I think that the main problem is that it isn't applied to the root element (body) from what I saw, it was applied as a child of the html element. I was using the bower release (12 days old currently,so not the latest dev source code).
I will create a plnkr when I I will arive home . In the meantime ... the app I am creating is very basic quizz with a lot of hardcoded html (I am just helping around my company).
I worked around currently with an ugly effect:

.material-dialog-container.active{
    /*position:fixed;*/
    /*top:200px;*/
    /*left:20%;*/
    width: 75%;position: fixed;left: 50%;margin: 0 0 0 -37.5%;
}
material-backdrop {
    position:fixed;
}
material-dialog{
    position:fixed;
    top:15%;
    left:35%;
}
.material-dialog-container material-dialog .dialog-content{
    padding:60px;
}

The app is here : http://ovidiubuligan.github.io and the source code is here : https://github.com/ovidiubuligan/ovidiubuligan.github.io/blob/master/main.css

@ajoslin
Copy link
Contributor

ajoslin commented Sep 8, 2014

Can you try out the latest version of material without your custom css and see if it still applies?

I just pushed something that will make it so bower is updated every commit with a new version.

All you need is to bower install angular-material#master to get the built version of angular-material's latest commit.

Check out the README for more instructions.

@ovidiubuligan
Copy link
Author

I have to wait until I get home to use bower/node ( corporate filtering ,proxyes, etc) I will update this comment after.
UPDATE
I created a stripped down version here with the latest angular material code . Click on the last angular material card (5'th) and it will fire a material dialog( without an targetEvent as parameter)
http://plnkr.co/edit/3eH9BB?p=preview

@ajoslin ajoslin closed this as completed in 6ba874d Sep 8, 2014
@ajoslin
Copy link
Contributor

ajoslin commented Sep 8, 2014

Fixed, thanks.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants