web-dev-qa-db-ja.com

スペースボトムマットフォームフィールドを削除する方法

enter image description here

私はangular 7 with angular materialを使用しており、ご覧のようにスペースの底を削除したいと思います。多くの方法を試しましたが、成功しませんでした。

angular-materialangular7
8
user9714967

これをCSSに追加できます

::ng-deep .mat-form-field-wrapper{
   margin-bottom: -1.25em;
}

ただし、これを追加すると、<mat-hint>hint</mat-hint>または<mat-error>error</mat-error>を適切に配置できなくなります。パディングを削除すると、エラーとヒントがフォームフィールド内に入ります。

::ng-deep（for Angular 8）を使用しない場合）

パディングを変更するコンポーネントのカプセル化をオフにします。

あなたはこれを行うことができます

import {Component,ViewEncapsulation} from '@angular/core';
@Component({
  selector: 'example',
  templateUrl: 'example.component.html',
  styleUrls: ['example.component.css'],
  encapsulation : ViewEncapsulation.None,
})
export class ExampleComponent {}

スタイルを設定するコンポーネントをカスタムクラスでラップします。したがって、他のmat-form-fieldコンポーネントには影響しません。とりあえずこれをmy-form-fieldクラスでラップしましょう

<mat-form-field class="my-form-field>
  <input matInput placeholder="Input">
</mat-form-field>

.my-form-field .mat-form-field-wrapper{
      margin-bottom: -1.25em;
}

ビューのカプセル化をオフにすることなく、これらのCSSをグローバルスタイルシートに追加できます。しかし、よりエレガントな方法は上記の方法です

15
Akhi Akl

以下を試してください：

<mat-form-field style="margin-bottom: -1.25em">

（この追加の下部スペースについての議論は、ここで行うことができます： https://github.com/angular/components/issues/7975 ）

4
Emerica

私の解決策は、追加のクラスを使用することでした。

HTML：

<mat-form-field class="no-padding">
    <input type="number" matInput placeholder="Speed" [ngModel]="speed"
           (ngModelChange)="onSpeedChange('speed', $event)"/>
  </mat-form-field>

SCSS：

.no-padding {
  .mat-form-field-wrapper {
    padding-bottom: 0 !important;
  }
}

！importantキーワードは、代わりにデフォルトをそのまま使用するため、残念ながら必要です。

0
TomDK
.mat-form-field-infix{
    display: block;
    position: relative;
    flex: auto;
    padding: 0;
    border-top: 0px solid transparent !important;
}

あなたはCSSで重要な追加することができます

0
Tienanhvn

angular 9では、component.scssに以下を追加することによってのみギャップを削除することができました（他の回答は私の場合機能しませんでした）：

::ng-deep .mat-form-field-wrapper{
  margin: 0 !important;
  padding: 0;
}

また、私はAppearance = "outline"を使用しています。他の外観の場合、他の要素がある可能性があるため、おそらく他のCSSクラスとプロパティを変更する必要があります。

0
Rafael Cerávolo

次のように、mat-form-fieldにheight：4emを追加できます。

    <mat-form-field
        class="height-4em"
        appearance="outline"
        >
        <mat-label>Favorite food</mat-label>
        <input matInput placeholder="Ex. Pizza" value="Sushi">
    </mat-form-field>
0
Safaa Hammoud

Style.scssで次のcssを使用して、mat-form-filedの下部のスペースを削除できます

.mat-form-field-wrapper{
    padding-bottom: 10px;
}
0
Sushilkumar Patil