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.
Related
The height doesn't get bigger and the inscription gets smeared and not pretty
I have already tried many types of solutions but none of them worked I tried to do
::ng deep .mat-option{...}
But it didn't work
I tried to do
::ng-deep cdk-global-overlay-wrapper{
But that didn't work either
And I want to increase the height of
mat-option and it doesn't work
Assign a panel class for the mat-select, so that a custom class is available inside the overlay,
<mat-select panelClass="custom-select">
<mat-option>option1</mat-option>
<mat-option>option2</mat-option>
</mat-select>
then in the main styles file styles.css add css rules in the custom class to override the default styles
.mat-select-panel.custom-select .mat-option{
height: 50px;
}
I have a situation where multiple mat-menus should be openable, the problem is that they can't have the same width.
So there are four mat-menus, one should be narrow, the other wide.. and I was able to change the widt only using ::ng-deep but it affects all of them.
I was searching for a different solution and found something like this:
add class to mat-menu element:
<mat-menu #menu="matMenu" class="mat-menu-main" xPosition="before">
try to do something like this in its css:
.mat-menu-panel.mat-menu-main {
width: 20rem;
margin-top: 4px;
}
Every other solution that I found is with ::ng-deep which I can't use..
Can someone help me with this?
Assigning a class and then controlling the width using the class will work (it is the method I use).
The class must be defined in your global style sheet, not at the component level.
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
I have changed the font size on my Kendo grid to 11 and by doing so, the calendar icon on a datepicker textbox gets cut off at the bottom. I was able to move the icon up using margin-top when you hover over it with the following code, however I am not able to figure out how to get it moved up in just its normal state.
.k-link:not(.k-state-disabled):hover>.k-i-calendar,.k-state-hover .k-i-calendar,.k-button:hover .k-i-calendar,.k-textbox:hover .k-i-calendar,.k-button:active .k-i-calendar{
background-position:-48px -176px; margin-top: -6px;
}
See example: http://jsbin.com/ufimom/592/edit
Try this,
.k-i-calendar {
background-position: -32px -176px;
margin-top: -6px !important;
}
Demo : http://jsbin.com/ufimom/596/edit
I have a highly personalized Kendo stuff. Custom styling is one of the biggest problems of kendo (along with million other issues that you will find once you start using kendo at a big scale). To minimize the size of the stylesheets they have combined a lot of styling of different controls into few files. Although its a good thing but it makes the custom styling (and then updating in the future) a nightmare. Knowing how ":not", ">", ":first", ":first-of-type", etc. work in css will really help you with styling of the grids and other controls.
I usually write separate stylesheets to override kendo styling (by using a lot of !important keyword in my override css). It helps when I update kendo.
Without seeing your html and background image in context, I'm just taking a guess here. Try appending the normal state of the calender icon to your css rule like this,
.k-link:not(.k-state-disabled):hover>.k-i-calendar,.k-state-hover .k-i-calendar,.k-button:hover .k-i-calendar,.k-textbox:hover .k-i-calendar,.k-button:active .k-i-calendar, .k-i-calendar { background-position:-48px -176px; margin-top: -6px; }
DEMO
EDIT: As the previous poster mentioned, !important is likely the best solution here, in order to override the Kendo settings. Example:
.k-i-calendar {
margin-top: 0px !important;
}
DEMO here: http://jsbin.com/ufimom/598/
I need to create a popup like the map has here on this page, but I'm not sure how best to do it and wondered if anyone could point me to some code would match that effect?
Any ideas would be great.
The Twitter Bootstrap modal jQuery plugin is really nice. You can get the html and javascript for it by customizing bootstrap here: http://twitter.github.io/bootstrap/customize.html
select only Modals from the components section and modals from the jQuery plugins section, and nothing else. Then download.
How to use it can be found here:
http://twitter.github.io/bootstrap/javascript.html#modals
basically what you do is in your markup, make a div that will be the popup, and give it the classes "modal hide fade". And then make something that will be the button to toggle the modal, and give it the attributes data-target="(the css selector of the modal div)" and data-toggle="modal".
To create a basic dialog/modal, you just need to create a new div or show an existing div with position: fixed and z-index: 1000 (or some other high value) using JavaScript. That div can have whatever contents you like. Along with the dialog/modal div, you would probably want a backdrop div as well, probably with at least the following styling:
position: fixed;
height: 100%;
width: 100%;
z-index: 500; // or some other high value
If you don't want to create your own, you could take a look at jQuery UI dialogs or bootstrap modals.