This is the output of my html code
I want to make the size of mat-chip form field even as the above form-field.
This is location from where I used chips..I want to decrease the size of the chip mat-form.
Asked
Active
Viewed 1,806 times
3
Zubair Saif
- 1,106
- 1
- 14
- 29
Leonard Loss
- 69
- 6
-
Hi dude try to post your code snippet here so i will look into it after reviewing your code i will try to help out thanks – Zubair Saif Aug 07 '21 at 08:14
-
and try to set width of chip – Zubair Saif Aug 07 '21 at 08:17
-
@ZubairSaif thank you for responding. It is not about width. I want the size of form field remains same after entering the chip.As soon as I enter the chip. height of the form field increases – Leonard Loss Aug 07 '21 at 08:28
-
.mat-standard-chip { min-height: 40px !important} try this one – Zubair Saif Aug 07 '21 at 08:33
2 Answers
1
You can override the styles from angular/material.
In this case, it is enough to simply add the same property in a style rule in your component's CSS file. Your component CSS has higher specificity than the mat-chip rules below.
The height of the chip is determined by the following rule:
.mat-standard-chip {
min-height: 32px;
}
So you could override this to make the chip smaller.
You may also want to modify the font-size with the following rule:
.mat-chip {
font-size: 14px;
}
andrew
- 1,723
- 2
- 12
- 24
0
from dev tools, try to get the right class attached with the element you wish to set the size for. Then using any preprocessor css, set the style for that element inside the component class the element is present.
vsnikhilvs
- 456
- 1
- 3
- 10