1

Goal: Make the height of a particular mat-form-field smaller (but still keep it positioned where it is, to the right of "Please Sign In"). It should take the minimum amount of space around the text value and dropdown arrow.

It currently looks like this:

Width

I want the lines on the box around it to be closer to the word English and the down arrow. The box was created by adding: appearance="outline"

Problem: I was able to successfully change the width, but not the height.

What I've tried:

HTML:

<div class="title-container">
    <mat-card-title class="text-center" i18n="@@MoVeSeLo_H1_1">
        Please Sign In
    </mat-card-title>
    <form [formGroup]="_siteForm">
        <mat-form-field class="language-field" appearance="outline">
            <mat-select (selectionChange)="doSomething($event)" [value]="languages[i]">
                <mat-option *ngFor="let language of languages" [value]="language">
                    {{language.viewValue}}
                </mat-option>
            </mat-select>
        </mat-form-field>
    </form>
</div>

CSS:

.title-container {
    position: relative;
    margin-top: 8px;
}

.language-field {
    position: absolute;
    right: 0;
    top: 0;
    margin-top: -16px;
    width: 115px;
    height:40px;
    padding-top: -1.84375em;    
}
angleUr
  • 449
  • 1
  • 8
  • 27

2 Answers2

3

I got you bro, Some easy Resolution is:

add this on your css

::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex {
height: 40px !important
}

::ng-deep .mat-form-field-infix {
padding-top: 1px !important;
}

exaplained

Here you can control your mat-form-field height as you want.

::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex {
    height: 40px !important
    }

And with this bellow you can control your mat-form-field placeholder padding to match with the new height that you put. 

 ::ng-deep .mat-form-field-infix {
    padding-top: 1px !important;
    }

let me know with works to you

Thiago Nascimento
  • 152
  • 1
  • 9
  • Thanks @Thiago for your response and explanation. It appears to be working but I am getting the warning: "::ngdeep is not a valid pseudo-element" , do you know why this would be? – angleUr Feb 26 '20 at 23:05
  • Actually I noticed this is effecting everything else on the page, everything else got smaller. Even other pages got smaller that weren't touched. – angleUr Mar 03 '20 at 16:12
  • @angleUr you need to use this only on the .css of the page u want. or it will really effect all the project, And yeah. all the .mat-form-field of the page will change – Thiago Nascimento Mar 03 '20 at 17:30
  • yes I only used it on that css page but it ended up affecting other pages. And yeah I only want it to affect that one mat form field, not any of the others. It is having weird affects. Ill play around with it a bit more. – angleUr Mar 04 '20 at 15:36
0

Code in https://pxgeqykgapgy.angular.stackblitz.io/

HTML

<form class="example-container" [formGroup]="options" [style.fontSize.px]="getFontSize()">
    <mat-card-title class="text-center">
        Please Sign In
    </mat-card-title>
    <mat-form-field class="matselect" [color]="options.value.color">
        <mat-select formControlName="color">
            <mat-option value="primary">English</mat-option>
            <mat-option value="accent">Chinees</mat-option>
            <mat-option value="warn">Hindi</mat-option>
        </mat-select>
    </mat-form-field>

</form>

CSS

.example-container {
  display: flex;
}

.matselect{
    width: 115px !important;
    border: 1px solid;
    border-radius: 6px;
    position: absolute;
    right: 10px;
    top: 10px;
}

::ng-deep .matselect .mat-form-field-underline {
    display: none !important;
}
Rajesh Sivasankaran
  • 136
  • 1
  • 8