I was wondering if there was a way to set the styling for a Mat-Expansion-Panel that's been disabled. I have buttons in the header and interacting with them toggles the panel so I believe it better to just toggle the panel with a button and disable the panel itself.
However, when I disable the panel it grey's out all the items inside the panel. Is there a way to remove the disable styles or overwrite them?
Using the following in your component style sheet will return the disabled expansion panel color back to default.
::ng-deep .mat-expansion-panel-header[aria-disabled=true] {
color: rgba(0,0,0,.87);
}
Per this SO answer, until an alternative or replacement is provided for ::ng-deep the recommendation is to continue using it...
What to use in place of ::ng-deep
If you want to make it cleaner, also in a Material way i would recommend to use the builtin material scss function and material scss variable.
::ng-deep mat-expansion-panel-header {
color: mat-color($accent);
}
[aria-disabled=true] is not required when both states disabled true and false should have the same color.
See also for more information: https://material.angular.io/guide/theming
Related
I'm having trouble changing the background color of a certain button on a WordPress plugin.
The button and text are set to white and I'm trying to identify the CSS file that controls it, unfortunately I've had no luck within the inspect element of my browser.
It is incorporated in a popup form - so multiple other files come into play.
I changed the color within the browser during inspect but need a fix.
You can overwrite CSS attributes by setting !important after your definition or by defining the scope better (e.g. by writing body or html before the class selector).
make sure your css file is able to "access" the dom element – if the element is in an iframe the css wont work.
body .wpforms-page-button {
background-color: green !important;
}
Using !important is generally considered hacky. Both rules in your screenshot have the same CSS specificity in that they are both firing on input[type="submit"] and .button.
Without seeing the corresponding HTML I can't give you the exact syntax, but something like
.parentclassname input[type='submit'] and or .parentclassname .button should make your style more specific than the original rule and therefore give it precedence.
Did you try to set !important after the #fff; ?
like this:
input[type=submit] {
background-color: #fff!important;
}
the best way is to define the button in a class, so you can change only the color for this specific button. Otherwise it will changes all the buttons to color #fff if you put the css in a general style.
I am new to Angular 2 Material and I am trying to customize the style of the md-menu component.
<md-icon class="material-icons" [mdMenuTriggerFor]="menu">dehaze</md-icon>
<md-menu #menu="mdMenu" [overlapTrigger]="false">
<button md-menu-item>Item 1</button>
<button md-menu-item>Item 2</button>
</md-menu>
The predefined style settings work fine (e.g. setting the Menu to non-overlapping), but I would like to set the md-menu to 100% width and have a little space between the md-icon button, that expands the menu, which I can not do with the predefined directives from Angular 2 Material.
So far I found a solution with the /deep/ css command, but I read that the command is not supported by the major browsers any more.
What is a good way to customize a Angular 2 Material component? How could I style my md-menu, so that it has 100% width and some space between it´s expanding button?
To illustrate what I am talking about:
Draft of the menu
You can pass custom classes to menus.
<md-menu #menu="mdMenu" [overlapTrigger]="false" class="my-full-width-menu">
Then you can target that class with global styles.
For your needs, unfortunately, you'll need to know some information about where your menu overlay is positioned, and hardcode some repositioning
.mat-menu-panel.my-full-width-menu {
max-width: none;
width: 100vw;
margin-left: -8px;
margin-top: 24px;
}
Plunker Demo
The right way to do this is to create a custom overlay component with material's OverlayModule (current in the material package, but soon to be moved to the cdk).
In Angular, ViewEncapsulation.Emulated is the default option which means, it tries to narrow-down the scope of the affect by adding surrogate keys to the host-element etc. One option could be is to add below css. But mind, this ng-deep will also be deprecated soon. Have to wait to know the alternative! https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep
::ng-deep .mat-menu-panel {
max-width: none!important;
min-width: 400px!important;
}
To style mat-menu without turning off encapsulation for this component you should use 2 classes to increase specificity as exactly as you already did or use !important. However, to make it work you should put them into your global stylesheet so that you will override the default styles.
I am modifying the bootstrap freelancer theme.In the Contact me section when trying to overwrite the "Name" label's color that appears when you try to type in the name input field it appears with #18BC9C but I want it to appear with #3fcbc7. It seems its styling is coming due to a class from a parent div that changes when I click on the input inside.I tried using dev tools "Break on..Attribute modifications" but maybe I'm doing it wrong. I took the classes I saw it had and tried to overwrite it that way as its worked for the other elements but its not working here. My CSS
custom.css
#page-top .floating-label-form-group-with-focus{
color:#3fcbc7!important;
}
#page-top .form-group col-xs-12 floating-label-form-group controls
floating-label-form-group-with-value floating-label-form-group-with-
focus {
color:#3fcbc7!important;
}
Added !important but nothing changed. Added the body id(page-top) for priority but didn't change. I don't want to edit the min css file since I heard that is considered bad practice
Try this by adding this style in your index.html itself
<style>
floating-label-form-group-with-focus label {
color: #3fcbc7;
}
</style>
Or you can add your css which you have provided above ^^
Check in your <head> that you're calling your custom css file AFTER the Bootstrap CSS file. Your custom styles should be called last as the browser reads these CSS rules in order. So if your Bootstrap CSS file comes AFTER your custom one, it's overwriting your custom style sheet.
Alright i have a button element as follows:
<button class='secondary row_1 col_1 not-sticky'>Button</button>
styling for secondary etc work, but it does not pick up the styling from 'not-sticky'. This is my basic styling:
.not-sticky { color:#FFFFFF; }
.sticky-state { color:#000066; }
When a button is clicked this code is run:
if ($(this).hasClass('sticky-state'))
$same = true;
//change old sticky classes to not sticky
$('.sticky-state').removeClass('sticky-state').addClass('not-sticky');
if (!$same)
$(this).removeClass('not-sticky').addClass('sticky-state');// chain our jQuery methods
Once this is run, the styling from sticky-state does work properly and the text color becomes #000066.
Also - through the use of chromes inspector i was able to verify that the classes are changing between not-sticky and sticky-state properly, just the styling from not-sticky is not showing at all
What could be making the not-sticky styling from not being applied at all?
Thanks
Here is the whole style sheet: http://staging.easyzag.com/style.css
It works in this fiddle: http://jsfiddle.net/c7XHX/
Don't know if $same was declared or not, but you always need to declare your JavaScript values.
I want to remove the backdrop on the modal, i know there is a hasBackdrop property when opening the modal but i only want to hide the backdrop based on some condition which will take place on the modal. So i was thinking I could do so with css but after inspecting element on the modal, I couldnt find anything relating to the backdrop's css.
I quite don't understand the question.
If what you need is maybe remove the shadow box of the dialog, just find the component which contains the dialog you need to work on, find it's style file and add this:
/deep/.mat-dialog-container {
box-shadow: none;
}
More info of the usage of deep can be found on angular docs and more example of their usage here (stackoverflow's question) and on angular's blog website.
If what you need here is remove the backdrop then beforehand create a class like
.no-backdrop {
background: none;
}
and add it to the function, which is used to create a dialog:
this.dialog.open(LoaderComponent, {
backdropClass: 'no-backdrop',
});
You can also just add false as value to the field hasBackdrop like:
this.dialog.open(LoaderComponent, {
hasBackdrop: false
});
as per default, the value is true.
More information can be found on angular material v5's webpage.
Hope it helps someone.
.mat-dialog-container has box-shadow, you can remove the box-shadow. For example you can add box-shadow: none; as an inline role or box-shadow: none !important; . Both will remove the box-shadow.
Try this:
In your .css/.scss file overwrite class
/deep/.cdk-overlay-dark-backdrop {
background:none!important;
}