Material: $mdDialog position should be "fixed", not "absolute"
When the body overflows and is scrolled the dialog moves with the content.
For example, we have the content at topmost position and everything looks good:
... until we scroll down:
stefan-dimitrov
All 25 comments
Same problem applies for the md-sidenav
stefan-dimitrov
on 12 Dec 2014
@stefan-dimitrov is your content inside md-content? I think if you don't use that you run into this problem since md-content is what handles the scrolling.
epelc
on 12 Dec 2014
same problem here, using md-content too
fabiobiondi
on 12 Dec 2014
@epelc, my content is inside md-content but unless I specify an exact value for the height the md-content container just stretches to fit what's inside it. _flex_ or _layout-fill_ or height in percentages do not work.
stefan-dimitrov
on 12 Dec 2014
@stefan-dimitrov try specifying a layout on all the parent elements. If that doesn't work I'll make a plunkr later tonight with a basic layout.
epelc
on 12 Dec 2014
@epelc it worked, thank you.
Although not how I was thinking it should've worked. Turns out the <body> needs to have a layout attribute, for the md-content to work.
At first I was trying with a topmost <div> container like so:
...
</head>
<body>
<div layout="column" layout-fill>
<md-toolbar>
<div class="md-toolbar-tools">
<span>{{pageTitle}}</span>
</div>
</md-toolbar>
<md-content flex>
<div ui-view="main"></div>
</md-content>
</div>
</body>
and it wasn't working. I don't know why, I always thought that it should work like that.
But doing it like so:
...
</head>
<body layout="column">
<md-toolbar>
<div class="md-toolbar-tools">
<span>{{pageTitle}}</span>
</div>
</md-toolbar>
<md-content flex>
<div ui-view="main"></div>
</md-content>
</body>
seems to be the correct way I guess.
stefan-dimitrov
on 13 Dec 2014
That's how I do it except I use row on the body since I have a sidenav.
epelc
on 13 Dec 2014
This doesn't solve the problem for me.
Moreover, if I click on a button to open a dialog AFTER scrolling down the page, the dialog opens at the top of the page, it scrolls to the top but not entirely.
Also, I wonder if setting "layout" to every parent could really be a solution. Which still doesn't solve the problem to me.
davideoliveri
on 2 Jan 2015
Can we reopen this issue? This is not solved for me, either.
In addition, this should be linked to #908
SebiH
on 15 Jan 2015
The following css worked for me:
md-backdrop.md-opaque.md-default-theme,
.md-dialog-container {
position:fixed;
}
heikkilamarko
on 17 Jan 2015
@SebiH @davideoliveri - please provide plunkr or codepens so we can analyse the issue for your configuration.
ThomasBurleson
on 18 Jan 2015
@ThomasBurleson Taken (and updated) from #908: http://plnkr.co/edit/FmBGZ3G0Y71vh0z7Ffrm?p=preview
SebiH
on 18 Jan 2015
I was cleaning the above plunker adding the "md-actions" class and I found it doesn't lock the scroll anymore. Nonetheless it works weirdly.
http://plnkr.co/edit/zizcq45x9D6r79ih6mMj?p=preview
davideoliveri
on 18 Jan 2015
Was also having this issue. Added a layout to the body like @epelc suggested and everything is working perfectly fine now. To whoever comes across this problem, just make sure that all parents of your md-content have a layout="column" or layout="row".
zilions
on 14 Mar 2016
@zilions be careful. layout="rowOrColumn" attributes on the body tag are dangerous in some situations and no longer recommended.
Try to get it working without the layout directly on the body if you can. My advice about the parents going up to body still stands though.
epelc
on 14 Mar 2016
@epelc can you suggest a way to achieve this without layout on the body? Tried quite a few things, and layout was the only thing that fixed this issue for me.
zilions
on 14 Mar 2016
@zilions height: 100%; min-height:100%; should work
On Sun, Mar 13, 2016 at 11:44 PM, zilions [email protected] wrote:
@epelc https://github.com/epelc can you suggest a way to achieve this
without layout on the body? Tried quite a few things, and layout was the
only thing that fixed this issue for me.—
Reply to this email directly or view it on GitHub
https://github.com/angular/material/issues/932#issuecomment-196124656.
Thank you,
Ed Pelc
epelc
on 14 Mar 2016
@epelc No luck. Although it does work if I add display:flex along with your styles. Is that a dodgy workaround?
zilions
on 14 Mar 2016
Maybe? If it works it works though.
I'd just test it in the different browsers to make sure it's not collapsing
or anything weird. You may also run into issues with toasts and dialogs so
test them.
On Sun, Mar 13, 2016 at 11:54 PM, zilions [email protected] wrote:
@epelc https://github.com/epelc No luck. Although it does work if I add
display:flex along with your styles. Is that a dodgy workaround?—
Reply to this email directly or view it on GitHub
https://github.com/angular/material/issues/932#issuecomment-196128447.
Thank you,
Ed Pelc
epelc
on 14 Mar 2016
@epelc After a ton of testing, this method seems like the wrong path to go down. By having md-content as the scrolling element within the application instead of the body tag, most mobile devices (especially iOS) won't scroll to the top of the page when the status bar is tapped on. This removes some native functionality for the user on iOS devices since most assume they can scroll to the top with this function.
I haven't looked into any code, although it seems to be like the md-dialog uses the scroll top of the md-content to determine where to place it. Is it possible to use body instead?
zilions
on 14 Mar 2016
I'm not sure this is a true fix, but I was having this same issue. I added this to my css and it seems to solve the problem:
body {
overflow-x: visible;
}
zuspan
on 20 Mar 2016
Same problem happens to me. I tried all the solutions here and nothing worked for me. At the end I changed angular-material.min.css. I searched md-backdrop and changed the position to fixed and now it works correctly.
AviEt
on 23 Mar 2016
Same problem here!! it took 4 hours working on it and still doesn't work.
The solution that I got is that I scroll manually to top of the page before calling $mdDialog
$anchorScroll.yOffset=0;
$anchorScroll();
I tried every solution that is here, not working. I think maybe somethings wrong with angular material design.
sinoohe
on 31 Mar 2016
same issues with me as well, making position:fixed messes the full-screen mode for small screens
opavader
on 14 May 2016
.md-dialog-container {
width: 100%;
height: 100%;
top: inherit !important;
bottom: 0px;
left: 0px;
position: fixed;
}
GavinPalmer1984
on 3 Aug 2016
Related issues
WebTechnolog
·
3Comments
nikhildev
·
3Comments
sbondor
·
3Comments
buzybee83
·
3Comments
ghost
·
3Comments