Set font size of Angular Material Tooltip - css

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;
}

Related

How to override materialize css in React

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;
}

Changing primeng CSS at component level

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

Angular 5 Custom CSS

Hey guys so im struggling to figure out how to add custom styles to elements for different pages
If i add the styles to the global css it works.
For example i use ui-carousel on three different pages and i need them to look different on each, so global wont work for me in this case
If i put a div class in my indiviudal css pages it works fine as i can name the class.
<h3 style="margin-left: 20px;">Fotos</h3>
<p-carousel numVisible="4"
[value]="_photos">
<ng-template let-p pTemplate="p">
<p>
<img style=" width: 100%;
padding: 4px;
/* margin: auto; */
border: 1px solid #ddd;"
[src]="p.photo">
</p>
</ng-template>
</p-carousel>
Any help appreciated
Let us understand your query first -
You want to change the css styling of element or component in different places.
For this you following options -
#Input inline css
If you have just few properties you want to update then you can opt for inline css.
#Input Style Class
If you have set of themes that you want to apply on the component, then you can go with the CSS Class option as #Input
There are some more advance option like Dynamic Template but I don't think you need that.
Overwrite CSS
To overwrite css you can use :host or :host ::ng-deep
Examples :
:host >>> .ui-dropdown-item {...}
or
:host ::ng-deep .ui-dropdown-item {...}
You can see the demo in action here - https://stackblitz.com/edit/angular-wz8iq4
You can have style-sheet corresponding to each component you create. Specify which stylesheet you want to use for a component while declaring the component:
e.g.
#Component({
selector: 'your-component-selector',
templateUrl: './your-component.html',
styleUrls: ['./your-component.css']
})
You can have multiple stylesheets for a component using the styleUrls array.
Hope it helps!
I think you might need to explain your question a little bit if #alokstar's answer is not what you need, because that is how I would do it as well.
If you have a CSS file for each component, plus the global one, and you specify which stylesheet you want to use in which component, there wouldn't be a problem.
p-carousel {
<some css styling>;
}
I think this article link explains it pretty well too.
Please see this link
Apply CSS Style to child elements
Possible solution would be to apply a custom class name to each instance on a div wrapper or the element itself. You may also need to apply ::ng-deep but ultimately you need some sort of identifier to make them a unique 1:1 to the css you want to apply.
<p-carousel class="classInstance1 " numVisible="4"
p-carousel.classInstance1 .ui-carousel {
position: relative !important;
padding: 0.683rem !important;
border: none !important;
background: white !important;
}
p-carousel.classInstance2 .ui-carousel {
position: relative !important;
padding: 0.683rem !important;
border: none !important;
background: green !important;
}

Styling mat-select in Angular Material

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">

Overwrite multiple css rules

I'm creating a chat widget and I want to overwrite a bunch of CSS. For example if this is the website theme's CSS:
textarea {
color: red;
margin: 10px;
}
and if I style my widget like:
textarea {
padding: 5px;
}
then only my widget's CSS should work. However, it adds both CSSs to textarea by default - how can I prevent the website's CSS from being added?
As Marc B stated, you can put your chat in an iframe, in which case you can have its own completely separate stylesheet.
If you must use it inline, then you can use all css property to unset what has been set elsewhere:
Widget CSS:
textarea {
all: unset;
padding: 5px;
}
Further, as pointed out in comments elsewhere, the best way is to create different classes for text area and use them where necessary, for example:
textarea.main {
color: red;
margin: 10px;
}
and if I style my widget like:
textarea.chat {
padding: 5px;
}
And then use
<textarea class="main">
or
<textarea class="chat">
depending on what you need.
Well I guess it is really easy to write !important to all your css rules. Just replace ";" with "!important" if that's an easy way for you OR if you really want to change then you can use iframe really

Resources