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

Modals do not appear to respect theming #525

Closed
WillsB3 opened this issue Nov 3, 2014 · 23 comments
Closed

Modals do not appear to respect theming #525

WillsB3 opened this issue Nov 3, 2014 · 23 comments
Milestone

Comments

@WillsB3
Copy link

WillsB3 commented Nov 3, 2014

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?

@rschmukler rschmukler self-assigned this Nov 3, 2014
@rschmukler
Copy link
Contributor

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

@WillsB3
Copy link
Author

WillsB3 commented Nov 3, 2014

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

Many thanks

@WillsB3
Copy link
Author

WillsB3 commented Nov 5, 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

screen shot 2014-11-05 at 13 25 01

@rschmukler
Copy link
Contributor

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!

@ThomasBurleson ThomasBurleson added this to the 0.6.0-rc1 milestone Nov 13, 2014
rschmukler added a commit that referenced this issue Nov 16, 2014
rschmukler added a commit that referenced this issue Nov 17, 2014
rschmukler added a commit that referenced this issue Nov 17, 2014
rschmukler added a commit that referenced this issue Nov 17, 2014
rschmukler added a commit that referenced this issue Nov 17, 2014
rschmukler added a commit that referenced this issue Nov 17, 2014
rschmukler added a commit that referenced this issue Nov 17, 2014
@hkjels
Copy link

hkjels commented Dec 1, 2015

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
Copy link

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

@vikassaklecha
Copy link

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
Copy link

hkjels commented Jan 28, 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.

@bobwah
Copy link

bobwah commented Mar 13, 2016

+1

@mjt60
Copy link

mjt60 commented Apr 6, 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?

@oostmeijer
Copy link

oostmeijer commented Jul 6, 2016

+1

1 similar comment
@Soren234
Copy link

Soren234 commented Aug 8, 2016

+1

@dpoetzsch
Copy link

dpoetzsch commented Aug 31, 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.

@hkjels
Copy link

hkjels commented Sep 2, 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.

@dpoetzsch
Copy link

dpoetzsch commented Sep 2, 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)

@hkjels
Copy link

hkjels commented Sep 2, 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

@johannesjo
Copy link

johannesjo commented Feb 10, 2017

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

@dlombardi
Copy link

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

@dpoetzsch
Copy link

dpoetzsch commented Feb 21, 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

@ghost
Copy link

ghost commented Apr 19, 2017

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

@thorvx
Copy link

thorvx commented Mar 14, 2018

some news about this issue?

on version 1.1.7 the issue persist

@codymikol
Copy link
Contributor

Hey @thorvx I fixed this issue with #11078

The merge request is approved and scheduled for 1.1.8 🐔

@codymikol
Copy link
Contributor

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

@angular angular locked as resolved and limited conversation to collaborators Mar 15, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests