CODEWITHSUNDEEP
angular-materialangular16mat-form-field
Kristian Mladenov
Kristian Mladenov

Reputation: 23

Modifying Angular 16 mat-form-field styles

I am looking to change the default styling of Angular Material's MatFormField. I want to reduce the inner padding of the input field in a form field, and reduce the gap between each form field.

I am aware that I probably need to modify some of the css styles Angular puts on the component but I have no idea what needs to be changed exactly.

Example of how I currently use the form fields (I want to reduce the gap between each form field and reduce the padding in the input fields)

<mat-form-field class="col-span-12">
            <input 
            type="text"
            matInput
            ngModel
            (input)="filter(selectedLayer.value)"
            name="select"
            #selectedLayer="ngModel"
            [matAutocomplete]="auto">
            <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" (optionSelected)="onSelectedOption($event)">
                    <mat-option *ngFor="let option of filteredOptions" [value]="option">
                        {{ option.label }}
                    </mat-option>
            </mat-autocomplete>
</mat-form-field>
<mat-form-field class="col-span-4">
            <input
            #fieldInput="ngModel"
            type="text"
            matInput
            disabled
            ngModel
            name="field">
</mat-form-field>

I was looking to override the styles of the form fields in the css but it didn't really work, bascially nothing changed in the visualization.

I am starting to think if I should create my own components and just extend the material ones?

Upvotes: 0

Views: 448

Answers (2)

kotinerus
kotinerus

Reputation: 1

You can use the host selector of the element from the official Angular Material 16 to change the appearance of the input element.

.mat-mdc-form-field input {
 padding: insertYourValue;
}

https://material.angular.io/components/form-field/api#material-form-field-testing-classes

Upvotes: 0

Sunny
Sunny

Reputation: 36

you can try applying CSS to it like setting its width and font size.

for example:

mat-form-field{
    width: 90%;
    font-size: 12px;
  }

just check if this is the thing you want or maybe i'm wrong or else can you provide me the code like its html and ts file if possible.

Upvotes: 0

Related Questions