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;
}
Related
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'm trying to create a toolbar using Material's mat-toolbar with an input and select inside of it. For both, I am using Material's provided components (mat-input and mat-select respectively) inside of mat-form-fields as advised. My code looks like this:
<mat-toolbar>
<mat-form-field appearance="outline">
<mat-icon matPrefix>search</mat-icon>
<input type="search" matInput placeholder="Search" />
</mat-form-field>
<mat-form-field appearance="outline">
<mat-select [(value)]="omitted">
<mat-option *ngFor="let omitted of omitted" [value]="omitted.slug">
{{ omitted.name }}
</mat-option>
</mat-select>
</mat-form-field>
</mat-toolbar>
At the moment, the input and select are too tall to completely fit in the toolbar. I am trying to style them to make them fit (by reducing height, padding, margin, etc.). However, Angular adds elements between mat-form-field and the contained elements. I am unable to style those elements from the component's Sass because of view encapsulation. So, even if I style everything immediately present in my template, the generated elements have heights, margins, and paddings that force the observed element to be outside of the toolbar.
I don't want to include a global style for those components because I don't want other mat-form-fields to get affected.
Turning off view encapsulation would essentially be the same thing as using global styling.
::ng-deep is deprecated so I can't use that.
I could style my own input and select from scratch, but then I lose out on the prebuilt styling that Material provides. Is there any way that I can style these Material components to fit in my toolbar?
I had similiar problem and I have solved it with wrapping component with a div and then style it in global stylesheet with this
.filters {
mat-form-field {
div.mat-form-field-flex {
align-items: flex-end;
}
div.mat-form-field-prefix {
padding-right: 12px !important;
}
}
}
In your case, you could add class (or id) to the toolbar or wrap the form field with a div and in order to encapsulate the rules you want.
You can set the encapsulation: ViewEncapsulation.None, in the #Component decorator.
This will free the component from the restrains about styling. Keep in mind if you are using global styles you have to take care of the proper styling I will suggest using BEM for naming the CSS styles and not using generic naming.
More info - https://angular.io/api/core/ViewEncapsulation
I added the following rules in my global stylesheet to make the mat-form-field fit:
[the selector for the mat-form-field I wanted to affect]
.mat-form-field-flex, .mat-form-field-label-wrapper
padding-top: 0
.mat-form-field-wrapper
padding-bottom: 0
.mat-form-field-underline
bottom: 0
.mat-form-field-infix
border-top: 0
You can add subscriptSizing="dynamic" to mat-form-field. This will not reserve spacing for the subscript below the mat-form-field.
In my Angular 4 project, I use ngClass on an object that has a CSS class applied with unset: all inside of it. I know that ngClass adds its properties, so the expected outcome is that all the values are unset and the style elements from ngClass are added. But this is not the case, now this is very annoying because the impact is big in my case:
<i [ngClass]="{'material-icons':true}" class="ignore-css" >chevron_right</i>
.ignore-css {
all: unset;
}
I need to unset previous CSS because I don't want the size and colors and so on... from the other icons on the page. But by all: unset; the arrow icon is not shown it just says chevron_right.
How can I unset previous CSS and get the icon?
Give it its library's default css values.
I suspect you also unset the font-family in the process.
You could add the !important keyword to the properties you have inside your material-icons class:
.material-icons{
attr: value !important;
}
This will override the unset.
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.