How to style mat-select's panel component. From the docs I get that I need to provide panelClass so I make it like this:
<mat-form-field>
<mat-select placeholder="Search for"
[(ngModel)]="searchClassVal"
panelClass="my-select-panel-class"
(change)="onSearchClassSelect($event)">
<mat-option *ngFor="let class of searchClasses" [value]="class.value">{{class.name}}</mat-option>
</mat-select>
</mat-form-field>
I inspected in developer tools that this class is attached to the panel in DOM and it is attached. So I have my custom scss class attached to this element. Now when I provide css it just don't work. My scss for example looks like this:
.my-select-panel-class {
width:20px;
max-width:20px;
background-color: red;
font-size: 10px;
}
The width of the panel is always equal to the width of the select element. Sometimes In options You have too long strings and I would like to make it a little bit wider. Is there any way how to do this. My style from my component just not working even background-color is not working. Does somebody knows why this behaves so strange?
I'm using:
Angular 4.4.5
#angular/material: 2.0.0-beta.12
For Angular9+, according to this, you can use:
.mat-select-panel {
background: red;
....
}
Demo
Angular Material uses mat-select-content as class name for the select list content. For its styling I would suggest four options.
1. Use ::ng-deep:
Use the /deep/ shadow-piercing descendant combinator to force a style
down through the child component tree into all the child component
views. The /deep/ combinator works to any depth of nested components,
and it applies to both the view children and content children of the
component.
Use /deep/, >>> and ::ng-deep only with emulated view encapsulation.
Emulated is the default and most commonly used view encapsulation. For
more information, see the Controlling view encapsulation section. The
shadow-piercing descendant combinator is deprecated and support is
being removed from major browsers and tools. As such we plan to drop
support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until
then ::ng-deep should be preferred for a broader compatibility with
the tools.
CSS:
::ng-deep .mat-select-content{
width:2000px;
background-color: red;
font-size: 10px;
}
DEMO
2. Use ViewEncapsulation
... component CSS styles are encapsulated into the component's view and
don't affect the rest of the application.
To control how this encapsulation happens on a per component basis,
you can set the view encapsulation mode in the component metadata.
Choose from the following modes:
....
None means that Angular does no view encapsulation. Angular adds the
CSS to the global styles. The scoping rules, isolations, and
protections discussed earlier don't apply. This is essentially the
same as pasting the component's styles into the HTML.
None value is what you will need to break the encapsulation and set material style from your component.
So can set on the component's selector:
Typscript:
import {ViewEncapsulation } from '#angular/core';
....
#Component({
....
encapsulation: ViewEncapsulation.None
})
CSS
.mat-select-content{
width:2000px;
background-color: red;
font-size: 10px;
}
DEMO
3. Set class style in style.css
This time you have to 'force' styles with !important too.
style.css
.mat-select-content{
width:2000px !important;
background-color: red !important;
font-size: 10px !important;
}
DEMO
4. Use inline style
<mat-option style="width:2000px; background-color: red; font-size: 10px;" ...>
DEMO
Put your class name on the mat-form-field element. This works for all inputs.
Working solution is by using in-build: panelClass attribute and set styles in global style.css (with !important):
https://material.angular.io/components/select/api
/* style.css */
.matRole .mat-option-text {
height: 4em !important;
}
<mat-select panelClass="matRole">...
I would like to add an explanation to why the options in a select cannot be styled in the standard way, like a mat-form-field, for example.
Elements like the options in a mat-select or a material modal are not inside the angular application, but in a container cdk-overlay-container.
The cdk-overlay-container is on the same level as the angular application. So that explains why normal css rules in a component are not applied to the elements.
This is why we need to access the class like in #Vega's answer
::ng-deep {
.mat-option {
font-family: cursive;
}
}
In css copy this code to make 100% width
mat-form-field {
width: 100%;
}
Angular material 11.2.6
<mat-select class="text-sm">
<mat-option> Text </mat-option>
</mat-select>
Where text-sm (as of tailwind)
.text-sm {font-size: 0.75rem}
Here's a fully fledged solution for styling mat select.
HTML follows:
<mat-form-field class="booking-facility">
<mat-select disableOptionCentering placeholder="facility" panelClass="booking-facility-select" [ngModel]="facilityId"
(ngModelChange)="updateFacility($event)">
<mat-option *ngFor="let fac of facilities | keyvalue" [value]="fac.value.id">
<span>{{ fac.value.name | lowercase }}</span>
</mat-option>
</mat-select>
</mat-form-field>
SCSS follows (use global stylesheet, namely styles.scss):
.booking-facility-styles {
font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
letter-spacing: 1px;
font-size: 22px;
color: #55595C;
}
.booking-facility {
// label
#extend .booking-facility-styles;
// label
.mat-form-field-label {
#extend .booking-facility-styles;
color: #BBB !important;
}
.mat-select-value-text {
// select
#extend .booking-facility-styles;
}
}
.booking-facility-select .mat-option {
// options
#extend .booking-facility-styles;
font-size: 16px !important;
}
.mat-form-field .mat-input-element, .mat-form-field .mat-select,
.mat-form-field.mat-form-field-appearance-legacy .mat-input-element,
.mat-form-field.mat-form-field-appearance-legacy .mat-select {
background-color: #0A0A0A !important;
.mat-select-value {
color: #fefefe !important;
font-size: 14px !important;
font-weight: $font-w-light;
}
}
In your component, disable styles encapsulation:
#Component({
selector: 'xxx',
templateUrl: './xxx.component.html',
styleUrls: ['./xxx.component.scss'],
encapsulation: ViewEncapsulation.None
})
For appearance (color/font), use
.mat-select-panel {
background: red;
}
Having options with very long text, you may want to change width of the list. In such case you should use:
.mat-form-field {
width: 100%;
.mat-form-field-infix {
width: 100%;
}
}
No !important; css shenanigans required. (tested with ang12+)
For <mat-option> inside <mat-autocomplete> you can set the panelWidth attribute of the autocomplete:
<mat-autocomplete panelWidth="240px">
Related
I need your help. I have a small piece of code. I use Material UI together with Angular. I have a group with a radio button. The fact is that the text in the radio button does not change, although I set the scss value to change to this color: # 262D34.
<mat-radio-group aria-label="Select an option" style="display: flex; flex-direction: column">
<mat-radio-button value="1" class="radio_button">
Roman Dyshko
</mat-radio-button>
<mat-radio-button value="2" class="radio_button">
Roman Dyshko
</mat-radio-button>
</mat-radio-group>
.radio_button {
font-family: 'Work Sans', serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 150%;
text-decoration-line: underline;
color: #556EE6;
}
mat-radio-group mat-radio-button .radio_button {
color: #556EE6;
}
You must use ::ng-deep if you want to have fully access to the styling of those components. Like this:
::ng-deep mat-radio-group mat-radio-button .radio_button {
color: #556EE6;
}
Above code would work generally, in case you want to go through a component styling.
Updated answer
In case you want to restyle your radio buttons, it should be something like this:
::ng-deep
.mat-radio-button.mat-accent.mat-radio-checked
.mat-radio-outer-circle {
border-color: blue; /*change radio button color when selected*/
}
::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle {
background-color: red; /*change radio button inner circle color */
}
::ng-deep .mat-radio-outer-circle {
border: 1px solid black; /*change radio button not checked border */
}
::ng-deep .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
background-color: rgba(0, 0, 0, 0.1) !important; /* change click effect color */
}
Note: I used !important, because as said, only in a few cases you must use force the style to change.
You need to override the default style with ::ng-deep. It is deprecated feature and it might change the color application wide. So use with caution like this.
::ng-deep mat-radio-group mat-radio-button .radio_button {
color: #556EE6 !important; //<--- not necessary but needed in some cases
}
You need to add !important (in some cases) and kill your terminal if you have an active one. Re-compile the app again it should solve your problem.
Material Radio Buttons
Text Color
Angular's API states that the ng-deep psuedo-class is deprecated and completely disables view-encapsulation for that rule.
If we use it without the :host pseudo-class, it will make the style-rule global, not a good thing. Which is what Angular will suggest you to do if there is no other way. (There is not atm.)
You can just use this in styles.scss, if you are sure you want them to bee applied globally.
.mat-radio-button {
color: pink;
}
Or if you want to use a color from your palette:
.mat-radio-button {
color: mat.get-color-from-palette($primary-light, 400);
}
If however you want it applied just to a specific radio-button in some.component.scss, you can use ::ng-deep, but make sure to use the :host pseudo class to prevent the rule from bleeding out of the component:
:host ::ng-deep .mat-radio-button {
color: #556EE6;
}
In short, you just need to know the right class names to override. In some cases like the ripple, the !important is needed to override the default.
What about !important ?
Some people also like to override the ripple to be in a secondary or off-color. So I'll use that as an example:
.mat-radio-ripple .mat-ripple-element {
background-color: mat.get-color-from-palette(
$accent-palette,
A400
) !important;
}
For this, or other styles you have already overwritten in your styles.scss, you do need to add !important.
Only Select Tags
Another example for when you want only select groups/radio-buttons to gain the styling. You can add your own class to it as an extra selector.
Template:
<li>
<mat-radio-group
class="pink"
aria-label="Select an option"
formControlName="gender"
>
<mat-radio-button color="primary" value="male">Male</mat-radio-button>
<mat-radio-button value="female">Female</mat-radio-button>
</mat-radio-group>
</li>
Css:
.pink .mat-radio-button {
color: pink;
}
Or for just one of the radio buttons:
<div class="pink">
<mat-radio-button value="female">Female</mat-radio-button>
</div>
Dynamically Add them on a Condition
Or here's another example if you want a style to be applied dynamically.
Template:
<div [ngClass]"getClass()">
<mat-radio-button value="female">Female</mat-radio-button>
</div>
Script:
getClass(event: Event) {
if(/* Your conditions */)
return ['pink']
return []
}
Stackblitz
Here's a Material Form Example on my Stackblitz account I edited to show everything you can find above (and more), including a Matial Theme etc. In it I'm overriding the mat-radio-button globally in styles.scss and also in app.component.scss.
I am using react to build simple app, and using Materilize css. In my UserProfile Component class importing UserProfile.css import "./UserProfile.css.
/* UserProfile.css */
.custom-class {
margin-top: 30 !important;
color: pink;
}
UserProfile in render method have
<h1 className="custom-class">Title</h1> // Margin is not applyed, but color is pink
I have an option to
<h1 style={{ marginTop: 30, color: "pink" }}>Title</h1>
this works fine, but I prefer style code in css files.
I am not sure maybe that issue has no relation to overriding.
you should use px in css files, change your code to margin-top: 30px !important; and it should work.
And if you want to check overriding issues in css, you can inspect your code(with right click your browser and choose inspect) and check if its crossed or not.
You'll need to use camelCase for your classname, so .customClass instead of .custom-class.
Then your import statement should look like:
import css from './UserProfile.css`;
and in your component:
<h1 className={css.customClass}>Title</h1>
Read up on CSS Modules for more information.
You don't have a unit for margin-top in your css class
.custom-class {
margin-top: 30px !important;
color: pink;
}
I have a form in my application where I use the following code from Primafaces:
...other inputs...
<label for="workshopTags">Tags</label>
<p-chips
[(ngModel)]="values"
name="workshopTags"
id="workshopTags"
></p-chips>
I am able to display the Chip element correctly but I would like to style it putting its width to 100% and the height to 100px, but nothing seems to work to change those. This solution didn't work for me. I tried to set a styleClass or an inline style as the documentation suggest but they didn't work either. If I write inline:
style="width: 100%"
The following error is thrown:
Error: Cannot find a differ supporting object 'width: 100%;'
How can I make it work?
there are tow methos to style primeng component overwrite the original style or by create a custom style base on custome class
overwrite
add the style to global style.css or style.scss , this method for overwrite primeng component style without add extra class to the component.
.ui-chips {
display: inline-block
}
.ui-chips ul {
border:2px dashed green !important; /* 👈 I have use important */
}
.ui-chips > ul.ui-inputtext .ui-chips-token {
font-size: 14px;
background: green !important; /* 👈 I have use important */
border:1px solid #005555;
box-shadow: 0 0 25px #ccc;
}
stackblitz demo 🍏🍏
custome style
the method above will change the style of all p-chips component in the entier project , by this method you need to set styleClass property so you can create different style like the example here 👇 , but you need to set styleClass property for every component
<p-chips [(ngModel)]="values" styleClass="p-chips"></p-chips>
style.css
.p-chips.ui-chips {
/* border:1px solid #ff2200; */
display: inline-block
}
.p-chips.ui-chips ul {
border:2px dashed orange;
}
.p-chips.ui-chips > ul.ui-inputtext .ui-chips-token {
font-size: 14px;
background: orange;
border:1px solid #ff5555;
box-shadow: 0 0 25px #ccc;
}
stackblitz demo 🍊🍊
You can use ht /deep/ modifier ,add this inside your app.component.css and delete it from your style.css, and you don't need !important to force the style here, delete it. here is what you are looking for
p {
font-family: Lato;
}
/deep/ .p-chips > .ui-inputtext {
width: 100%;
height: 100px;
}
check it here https://stackblitz.com/edit/angular-primeng-startup-kmm7xw
You could try encapsulation: ViewEncapsulation.None in your override component decorator:
#Component({
selector: 'app-chip',
templateUrl: 'path-to-template where you use ui-chips',
styleUrls: ['path-to-styles where you could override ui-chips styles'],
encapsulation: ViewEncapsulation.None
})
export class AppChipComponent { }
To set the width to 100%, you have to use the style or styleClass attribute and set the css property display: block.
As an example using the styleClass attribute
<p-chips
[(ngModel)]="interests"
styleClass="block">
</p-chips>
Here I am using Prime Flex v3 with PrimeNg.
I understand similar topics have been discussed multiple times, but I couldn't find the solution to the problem I am facing.
I am trying to change the styles of PrimeNG in my angular app.
In my component, I changed .ui-inputext class of PrimeNG.
body .ui-inputtext {
font-size: 0.8vw;
padding:0;
background-color: #557db1 !important;
}
This is working only when I set encapsulation:ViewEncapsulation.None in my component class.
I also tried using :host >>>
:host >>> body .ui-inputtext {
font-size: 0.8vw;
padding:0;
color:red;
background-color: #557db1 !important;
}
Issue with using encapsulation:ViewEncapsulation.None in my component is that it changes styles of PrimeNGcontrols in the whole app.
I want to make changes to the control only for this component where I have modified CSS class.
Is there something else I need to do or maybe I am missing something here?
This issue was raised on GitHub here (https://github.com/primefaces/primeng/issues/1812) but it was not tracked further.
Try with :host /deep/ in your component css file.
Add one class to that input field and try to change css using that class rather than using the body and add encapsulation: Viewencaptulation.None in your component.ts file. It will not change other component css.
Here is the example code you can try like this:
<input type="text" class="field_input" pInputText placeholder="Username">
.field_input.ui-inputtext {
font-size: 0.8vw;
padding:0;
background-color: #557db1 !important;
}
Stackblitz Link:
https://stackblitz.com/edit/angular-romzcu?embed=1&file=src/app/app.component.ts
I am very new to web development, and I cannot figure out how to solve the following issue, although it may be very easy.
I am using Angular 4 and Angular Material to implement tooltips like this:
<div mdTooltip="tooltip text" mdTooltipPosition="above">
<span>Show tooltip</span>
</div>
I would like to make the font size of the tooltip text bigger. However, I did not manage to find how to do this in the Angular Material documentation, neither searching in the web. Does anyone have any idea on how to do this? Thanks.
You can fix this by adding a .mat-tooltip css declaration in you main styles file and change the font size there. You need to set !important on the font size otherwise it won't show up.
Per the documentation here: https://material.angular.io/components/tooltip/api
And the spec: https://github.com/angular/material2/blob/master/src/lib/tooltip/tooltip.spec.ts
You can set the property 'matTooltipClass', as follows:
<div matTooltip="tooltip text" matTooltipPosition="above" matTooltipClass="tooltip">
<span>Show tooltip</span>
</div>
Then in your CSS (global - not for the component):
.mat-tooltip.tooltip {
background-color: darkblue;
font-size: 12px;
}
Also see their demo here: https://github.com/angular/material2/tree/master/src/demo-app/tooltip
Also keep in mind if you are using SASS, that the container for the tooltip is at the bottom and nowhere near where you are placing it in your component's HTML, so do not nest it in that component. Make sure it is standalone, otherwise it will not work. This note applies as well obviously to the comment above if you just choose to override .mat-tooltip
To see the changes, in developer tools, find the div at the bottom with the class "cdk-overlay-container". Then hover over the element. You can use your arrow keys to navigate into the element while you are hovered over to confirm whether your class is being added.
You can use css /deep/ selector.
For example:
/deep/ .mat-tooltip {
font-size: 14px;
}
Then you do not have to use !important
Add ng-deep before class name
Try this
::ng-deep .mat-tooltip {
background: red!important;
}
My problem was that using a globally defined css class-name such as .customname-toolip for matTooltipClass was NOT working. My solution below, and the !important was needed; set in the global styles.css file:
.mat-tooltip {
font-size: 16px !important;
}
add following code in your styles.css to increase its font size i.e. 12px
CSS
.mat-tooltip {
font-size: 14px !important;
}
and use matTooltip in your tag's as.
<p matTooltip="My Tooltip">...<p>
Try this way. It should work.
test.component.html
<div mdTooltip="tooltip text" mdTooltipPosition="above" matTooltipClass="myTest-tooltip">
<span>Show tooltip</span>
</div>
test.component.ts
#Component({
selector: 'test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.scss'],
encapsulation: ViewEncapsulation.None,
/*
styles: [`
.myTest-tooltip {
min-width: 300px;
background-color: #FC5558;
font-size: 16px;
}
`]*/
})
test.component.scss
.myTest-tooltip {
min-width: 300px;
background-color: #FC5558;
font-size: 16px;
}
Use matTooltipClass to apply your custom class on tooltips
<button mat-raised-button
matTooltip="Adding a class to the tooltip container"
matTooltipClass="custom-tooltip">
Custom tooltip
</button>
Add your style in your component style.scss file
.custom-tooltip {
font-size: 20px !important;
}
You can set custom style only for your component by adding a custom class + using /deep/, which will apply the css changes only for your custom class and not globally.
for example adding a custom tooltip for an image tag :
<img
matTooltip="text"
matTooltipClass="my-custom-class"<----
src=""/>
and in the css file :
/deep/ .mat-tooltip.my-custom-class {<---
background: #FFFFFF;
}
I dont have an experience with angular but you may add a class or id for div. Then you may control with this class or id with css file.
<div class="sth" mdTooltip="tooltip text" mdTooltipPosition="above"> <span>Show tooltip</span> </div>
And
.sth{
font-size:20px;
}
in css file.
In v15, you can change css variables
body{
.mat-mdc-tooltip{
--mdc-plain-tooltip-container-color: #616161;
--mdc-plain-tooltip-supporting-text-color: white;
--mdc-plain-tooltip-supporting-text-font: Roboto, sans-serif;
--mdc-plain-tooltip-supporting-text-size: 12px;
--mdc-plain-tooltip-supporting-text-weight: 400;
--mdc-plain-tooltip-supporting-text-tracking: 0.0333333333em;
line-height: 12px;
}
}
Put this in your component css (or home component css if you want to apply it globally. note that putting this in your global css file won't work, and you have to put it in the home component css to apply it globally).
::ng-deep .mat-tooltip {
font-size: 16px;
}