Material: Modals do not appear to respect theming
When instantiating a modal, the modal always uses the "default" theme (e.g. the class md-default-theme), even though the modals DOM element is a child of <body> on which I have md-theme="custom-theme-name".
I thought maybe we could use the $mdTheming service in our application's .config block to set the default theme name by calling setDefaultTheme('custom-theme-name') but from my initial investigation it seems as though this function is not public and so cannot be called from outside Angular Material.
What is the intended solution for applying themes to modals?
WillsB3
All 23 comments
I will take a look at this. Which build are you using?
rschmukler
on 3 Nov 2014
We are using the source at the tag v0.5.1.
Many thanks
WillsB3
on 3 Nov 2014
The same issue happens for toasts too. This toast should have the theme mytheme as per the md-theme attribute set on the body, but instead it's set to md-default-theme
WillsB3
on 5 Nov 2014
Indeed, this appears to be an issue with $interimElement not respecting theming. Expect a fix to ship within the next release. Thank you for reporting this!
rschmukler
on 5 Nov 2014
I'm still seeing this issue. Has it re-appeared or what?
If I specifically add md-theme="sometheme" to md-dialog, that works.
But if I append the dialog to an element that has md-theme set, the styles won't apply.
I'm at 0.11.4
hkjels
on 1 Dec 2015
@hkjels I'm having the same issue, can you share a snippet how you are adding to dialog?
vikassaklecha
on 28 Jan 2016
snippet
var alert = $mdDialog.alert({
parent: parentEl,
targetEvent: $event,
scope: $scope, // use parent scope in template
preserveScope: true,
theme:"my_theme",
template:'my_html'
});
$mdDialog.show(alert);
theme shows up in the alert object but does not apply to toolbar and button elements.
vikassaklecha
on 28 Jan 2016
I just went around the issue by passing the theme as a local. It's just two extra lines of code, so I can live with it. Still think this should be fixed, but I'm spending my time elsewhere.
hkjels
on 28 Jan 2016
+1
bobwah
on 13 Mar 2016
I'm also still experiencing this issue. Are we required to use md-theme in out dialogs, and pass the theme variable through locals?
mjt60
on 6 Apr 2016
+1
oostmeijer
on 6 Jul 2016
+1
Soren234
on 8 Aug 2016
EDIT:
As it was written in #1399 the theme is inherited from the parent element. So one fix is to use the element where you set the md-theme as parent:
....
<body>
<div md-theme="myTheme" id="md-theme-div">
CONTENT
</div>
</body>
....
$mdDialog.show({
// ...
parent: angular.element(document.getElementById("md-theme-div")),
});
It is a bit confusing because the behavior makes you think it uses the default theme which is only true because the parent element was set wrong. I think the best option would be to provide some general service in angular that has methods to switch the overall theme of the app and use the md-theme directive only when deviating from the overall theme.
dpoetzsch
on 31 Aug 2016
@dpoetzsch even setting the parent explicitly to one with the correct theme does not solve the issue. The theme must be set within the dialog itself.
hkjels
on 2 Sep 2016
@hkjels http://codepen.io/dpoetzsch/pen/GjRdWp or did I misunderstand the problem?
One important thing is to have a current version of angular material (this one is with angular 1.5.8 and angular material 1.1.0)
dpoetzsch
on 2 Sep 2016
Great! I missed the part with
// This is the absolutely vital part, without this, changes will not cascade down through the DOM.
Can probably close this one now
hkjels
on 2 Sep 2016
@dpoetzsch fix doesn't work for me either unfortunately. Isn't there any way to set the dialog theme programmatically at least?
johannesjo
on 10 Feb 2017
1.3.0 broke dialog theme inheritance from designated parent in dialog config. Anything we can do?
dlombardi
on 16 Feb 2017
@johannesjo As I just noticed this used to work with angular-material 1.1.1 and was broken in 1.1.2. Well, this sucks!
See here (only thing change from above is the use of angular-material 1.1.2): http://codepen.io/anon/pen/vgovwd
dpoetzsch
on 21 Feb 2017
I'm also having the same issue as dlombardi & dpoetzsch
rosie-rowe
on 19 Apr 2017
some news about this issue?
on version 1.1.7 the issue persist
thorvx
on 14 Mar 2018
Hey @thorvx I fixed this issue with https://github.com/angular/material/pull/11078
The merge request is approved and scheduled for 1.1.8 馃悢
codymikol
on 14 Mar 2018
@Splaktar You should be able to close this with https://github.com/angular/material/pull/11078 馃悢
codymikol
on 14 Mar 2018
Related issues
Dona278
路
3Comments
robertmesserle
路
3Comments
ghost
路
3Comments
WebTechnolog
路
3Comments
nikhildev
路
3Comments
Most helpful comment
1.3.0 broke dialog theme inheritance from designated parent in dialog config. Anything we can do?