CODEWITHSUNDEEP
htmlcssangularangular-material
Shree Batale
Shree Batale

Reputation: 237

How to fix Mat-label on border angular material

I'm trying to create multi-option select input using Angular material. I want to fix <mat-label> on the border of the input field but now when I clicked on the input field then it is moving on to the border. How to fix this <mat-label> on the input border

My style.css

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

.mat-select-panel {
  position: absolute;
  top: 32px;
  left: 4px;
  min-width: calc(100% + 22px) !important;
  border-radius: 0px !important;
  border: 1px solid rgb(31, 30, 30);
  border-top-style: none;
}

.mat-form-field-appearance-outline .mat-form-field-outline-start {
  border-radius: 0px !important;
  border: 1px solid rgb(43, 41, 41) !important;
  border-right-style: none !important;
}

.mat-form-field-appearance-outline .mat-form-field-outline-end {
  border-radius: 0px !important;
  border: 1px solid rgb(56, 55, 55) !important;
  border-left-style: none !important;
}

.mat-select-panel ng-animating {
  visibility: hidden;
}

My StackBlitz Link -> https://stackblitz.com/edit/angular-matselect-style-ddggww?file=src/styles.css

Upvotes: 2

Views: 4396

Answers (1)

antoineso
antoineso

Reputation: 2151

I'm not sure to understand everything but if you want your label to be always "inside" the top border of your mat-form-field you need to pass a floatLabel="always" to your mat-form-field.
Like this:

    <mat-form-field appearance="outline" floatLabel="always">
        <mat-label> test </mat-label>
        <mat-select placeholder="Favorite food">
            <mat-option *ngFor="let food of foods" [value]="food.value">
                {{food.viewValue}}
            </mat-option>
        </mat-select>
    </mat-form-field>

And if you want this behaviour to be the default one, you can (as describe in the doc ) add this in your application's root module.:

@NgModule({
  providers: [
    {provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {floatLabel: 'always'}}
  ]
})

And you won't need to pass floatLabel="always" anymore.

Upvotes: 3

Related Questions