Modals do not appear to respect theming #525

WillsB3 · 2014-11-03T13:40:46Z

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?

The text was updated successfully, but these errors were encountered:

rschmukler · 2014-11-03T17:42:46Z

I will take a look at this. Which build are you using?

WillsB3 · 2014-11-03T18:50:16Z

We are using the source at the tag v0.5.1.

Many thanks

WillsB3 · 2014-11-05T13:26:17Z

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

rschmukler · 2014-11-05T13:39:37Z

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!

…ining Closes #643. Closes #650. Closes #597. Closes #596. Closes #525.

hkjels · 2015-12-01T13:05:51Z

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

vikassaklecha · 2016-01-28T10:45:36Z

@hkjels I'm having the same issue, can you share a snippet how you are adding to dialog?

vikassaklecha · 2016-01-28T10:57:11Z

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.

hkjels · 2016-01-28T11:50:34Z

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.

bobwah · 2016-03-13T11:23:08Z

+1

mjt60 · 2016-04-06T21:34:11Z

I'm also still experiencing this issue. Are we required to use md-theme in out dialogs, and pass the theme variable through locals?

oostmeijer · 2016-07-06T06:23:19Z

+1

Soren234 · 2016-08-08T11:54:05Z

+1

dpoetzsch · 2016-08-31T12:42:48Z

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.

hkjels · 2016-09-02T10:45:02Z

@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.

dpoetzsch · 2016-09-02T14:44:02Z

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

hkjels · 2016-09-02T15:49:45Z

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

johannesjo · 2017-02-10T15:38:44Z

@dpoetzsch fix doesn't work for me either unfortunately. Isn't there any way to set the dialog theme programmatically at least?

dlombardi · 2017-02-16T15:37:48Z

1.3.0 broke dialog theme inheritance from designated parent in dialog config. Anything we can do?

dpoetzsch · 2017-02-21T20:10:30Z

@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

ghost · 2017-04-19T12:58:43Z

I'm also having the same issue as dlombardi & dpoetzsch

thorvx · 2018-03-14T13:23:53Z

some news about this issue?

on version 1.1.7 the issue persist

codymikol · 2018-03-14T15:55:19Z

Hey @thorvx I fixed this issue with #11078

The merge request is approved and scheduled for 1.1.8 🐔

codymikol · 2018-03-14T15:56:18Z

@Splaktar You should be able to close this with #11078 🐔

rschmukler self-assigned this Nov 3, 2014

ThomasBurleson added the ui: theme label Nov 13, 2014

ThomasBurleson added this to the 0.6.0-rc1 milestone Nov 13, 2014

rschmukler closed this as completed in 12b8cbc Nov 15, 2014

rschmukler added a commit that referenced this issue Nov 16, 2014

refactor(): use strict, consolidate material.core, interimElement cha…

cca0c09

…ining Closes #643. Closes #650. Closes #597. Closes #596. Closes #525.

rschmukler added a commit that referenced this issue Nov 17, 2014

refactor(): use strict, consolidate material.core, interimElement cha…

b91b451

…ining Closes #643. Closes #650. Closes #597. Closes #596. Closes #525.

rschmukler added a commit that referenced this issue Nov 17, 2014

refactor(): use strict, consolidate material.core, interimElement cha…

663b5ca

…ining Closes #643. Closes #650. Closes #597. Closes #596. Closes #525.

rschmukler added a commit that referenced this issue Nov 17, 2014

refactor(): use strict, consolidate material.core, interimElement cha…

1ae34e3

…ining Closes #643. Closes #650. Closes #597. Closes #596. Closes #525.

rschmukler added a commit that referenced this issue Nov 17, 2014

refactor(): use strict, consolidate material.core, interimElement cha…

db4c1b9

…ining Closes #643. Closes #650. Closes #597. Closes #596. Closes #525.

rschmukler added a commit that referenced this issue Nov 17, 2014

refactor(): use strict, consolidate material.core, interimElement cha…

d5470d4

…ining Closes #643. Closes #650. Closes #597. Closes #596. Closes #525.

rschmukler added a commit that referenced this issue Nov 17, 2014

refactor(): use strict, consolidate material.core, interimElement cha…

a8f1688

…ining Closes #643. Closes #650. Closes #597. Closes #596. Closes #525.

WillsB3 mentioned this issue Nov 26, 2014

md-dialog not using md-theme #742

Closed

dpoetzsch mentioned this issue May 11, 2017

Update bower.json alenaksu/mdPickers#190

Open

thorvx unassigned rschmukler Mar 14, 2018

thorvx mentioned this issue Mar 14, 2018

md-colors is broken with default theme in dialog #10276

Closed

angular locked as resolved and limited conversation to collaborators Mar 15, 2018

Modals do not appear to respect theming #525

Modals do not appear to respect theming #525

Comments

WillsB3 commented Nov 3, 2014

rschmukler commented Nov 3, 2014

Uh oh!

WillsB3 commented Nov 3, 2014

Uh oh!

WillsB3 commented Nov 5, 2014

Uh oh!

rschmukler commented Nov 5, 2014

Uh oh!

hkjels commented Dec 1, 2015

Uh oh!

vikassaklecha commented Jan 28, 2016

Uh oh!

vikassaklecha commented Jan 28, 2016

Uh oh!

hkjels commented Jan 28, 2016

Uh oh!

bobwah commented Mar 13, 2016

Uh oh!

mjt60 commented Apr 6, 2016

Uh oh!

oostmeijer commented Jul 6, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Soren234 commented Aug 8, 2016

Uh oh!

dpoetzsch commented Aug 31, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hkjels commented Sep 2, 2016

Uh oh!

dpoetzsch commented Sep 2, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hkjels commented Sep 2, 2016

Uh oh!

johannesjo commented Feb 10, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dlombardi commented Feb 16, 2017

Uh oh!

dpoetzsch commented Feb 21, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ghost commented Apr 19, 2017

Uh oh!

thorvx commented Mar 14, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codymikol commented Mar 14, 2018

Uh oh!

codymikol commented Mar 14, 2018

Uh oh!

oostmeijer commented Jul 6, 2016 •

edited

Loading

dpoetzsch commented Aug 31, 2016 •

edited

Loading

dpoetzsch commented Sep 2, 2016 •

edited

Loading

johannesjo commented Feb 10, 2017 •

edited

Loading

dpoetzsch commented Feb 21, 2017 •

edited

Loading

thorvx commented Mar 14, 2018 •

edited

Loading