Início / coding / Perguntas / 77581470
Accepted
Ole
Asked: 2023-12-01 04:22:59 +0800 CST

Alterando a altura de um campo de seleção de material Angular 17?

  • 772

Nesta demonstração, gostaria de reduzir a altura do campo de seleção. Esta é a marcação.

<mat-form-field appearance="outline">
  <mat-label>Toppings</mat-label>
  <mat-select [formControl]="toppings" multiple>
    <mat-select-trigger>
      {{toppings.value?.[0] || ''}} @if ((toppings.value?.length || 0) > 1) {
      <span class="example-additional-selection">
        (+{{(toppings.value?.length || 0) - 1}} {{toppings.value?.length === 2 ?
        'other' : 'others'}})
      </span>
      }
    </mat-select-trigger>
    @for (topping of toppingList; track topping) {
    <mat-option [value]="topping">{{topping}}</mat-option>
    }
  </mat-select>
</mat-form-field>

Se entrarmos nas ferramentas do desenvolvedor e selecionarmos o divcom a classe, mat-mdc-form-field-infixpodemos alterar o heighte o padding, no entanto, quando o preenchimento é alterado, ele também altera a localização da seta suspensa, então estou tentando descobrir como manter tudo centralizado enquanto reduzindo a altura.

Pensamentos?

html

1 respostas

  1. Best Answer

    Experimente o seguinte:

    .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix {
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: 4%; /*you can tweak around with this, */
    margin-bottom: -15%; /*and this*/
}

/*you also have to adjust the label, after the above*/
.mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-floating-label.mdc-floating-label {
    top: 50%;
}
.mdc-floating-label--float-above{
    top: 80% !important;
}
    • 1

relate perguntas