Как изменить высоту в mat-form-field

Question

Как я могу изменить высоту в mat-form-field с appearance="outline"?

Мне нужно уменьшить поле mat-form-field.

Мой пример ввода

Answer 1

Добавьте их в свой CSS в оригинальном стеке

::ng-deep .mat-form-field-flex > .mat-form-field-infix { padding: 0.4em 0px !important;}
::ng-deep .mat-form-field-appearance-outline .mat-form-field-label { margin-top:-15px; }
::ng-deep label.ng-star-inserted { transform: translateY(-0.59375em) scale(.75) !important; }

ОБНОВЛЕНО: с переходом для метки...

::ng-deep .mat-form-field-flex > .mat-form-field-infix { padding: 0.4em 0px !important;}
::ng-deep .mat-form-field-label-wrapper { top: -1.5em; }

::ng-deep .mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
    transform: translateY(-1.1em) scale(.75);
    width: 133.33333%;
}

Answer 2

TL; DR: отрегулируйте размер шрифта окружающего контейнера.

Дольше: функция изменения размера полей формы встроена в Angular Material, поэтому, если вы не хотите изменять относительные пропорции в поле, вам не нужно путаться с изменением размеров отдельных компонентов (см. Документацию).

Ключом к настройке размера поля на самом деле является просто настройка размера шрифта в окружающем контейнере. Как только вы это сделаете, все остальное будет масштабироваться вместе с ним. например

С контейнером font-size: 12px;

<div style="font-size: 12px">
  
  <mat-form-field appearance="outline">
    <mat-label>Your name</mat-label>
    <input matInput placeholder="Jane Doe">
  </mat-form-field>

  <mat-form-field appearance="outline">
    <mat-label>Your email</mat-label>
    <input matInput placeholder="[e-mail]">
  </mat-form-field>

</div>

Результирующая форма:

С контейнером font-size: 18px;

<div style="font-size: 18px">
  
  <mat-form-field...

</div>

Результирующая форма:

NB

Это не решение для вас, если вас не устраивают отступы по умолчанию для материальных форм. Однако это другой вопрос, чем просто изменить размер форм. Изменить размер просто, изменить прокладку и т. Д. Сложнее!

Answer 3

Обновление Angular Material 15+

Начиная с материала v15 была добавлена ​​плотность компонентов , что позволяет безопасно настраивать без каких-либо::ng-deepи стили, подавляющие суету.

Вот пример из документов:

      // You can set a density setting in your theme to apply to all components.
$dark-theme: mat.define-dark-theme((
  color: ...,
  typography: ...,
  density: -2, // default is 0
));

// Or you can selectively apply the Sass mixin to affect only specific parts of your application.
.the-dense-zone {
  @include mat.button-density(-1);
}

Вот stackblitz, который демонстрируетmat-form-fieldплотность.

Answer 4

Использование решения @AkberIqbal испортило мой стиль для полей mat-form, которые где нет outline, Также это решение не нуждается ни в каком !important;, С !important; ты уже потерялся:D.

Так что вот безопасный способ добавить к вашим глобальным стилям: (кажется излишним, но я скорее буду экономить, чем сожалеть)

mat-form-field.mat-form-field.mat-form-field-appearance-outline > div.mat-form-field-wrapper > div.mat-form-field-flex > div.mat-form-field-infix  { padding: 0.4em 0px }
mat-form-field.mat-form-field.mat-form-field-appearance-outline > div.mat-form-field-wrapper > div.mat-form-field-flex > div.mat-form-field-infix > span.mat-form-field-label-wrapper { top: -1.5em; }

.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
    transform: translateY(-1.1em) scale(.75);
    width: 133.33333%;
}

Итак, как вы можете видеть. Я "выслеживаю" каждый класс, пока не найду набросок! Мне нравится стиль контура, который применяется только к полям контура.

Answer 5

TL;DR Поля формы материала основаны на font-size свойство поля.

Не делайте ошибку, регулируя высоту материала, гребки и т. Д. В вашем CSS/SCSS... Элементы формы материала, такие как ввод и выбор, основаны на font-size. Кроме того, не рекомендуется использовать встроенные стили, поэтому вы можете просто добавить немного CSS. Атрибут "внешний вид" не имеет значения.

::ng-deep .mat-form-field {
    font-size: 12px; // example
}

Answer 6

ОБНОВЛЕНО

HTML

         <mat-form-field appearance="outline" style="height: 40px;">
            <input matInput >
   </mat-form-field>

CSS

      ::ng-deep .mat-mdc-text-field-wrapper {
    height: 40px !important;
}
::ng-deep .mat-mdc-form-field-flex {
    margin-top: -7px !important;
}

Answer 7

Если кто-то хочет сделать ответ Акбера Икбала на основе классов (чтобы были доступны оба размера):

:host ::ng-deep {
  .my-custom-component-small { // add my-custom-component-small class to your mat-form-field element
    .mat-form-field-flex > .mat-form-field-infix { padding: 0.4em 0 !important;}
    .mat-form-field-label-wrapper { top: -1.5em; }

    &.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
      transform: translateY(-1.1em) scale(.75);
      width: 133.33333%;
    }
  }
}

Надеюсь, команда Angular добавит поддержку пользовательского интерфейса с высокой плотностью в будущих выпусках (высокая плотность является частью спецификаций материального дизайна).

Answer 8

Как объясняли многие люди, пишущие сообщения, угловое поле формы материала основано на размере шрифта, поэтому для всех вас, кто хочет определить настраиваемое поле формы, вот мой код для изменения размера как высоты, так и ширины, не затрагивая шрифт или значок ввода изменить размер.

• Определите внутри компонента css этот код и примените их как класс к метке поля mat-form.

Answer 9

Для углового материала 15 у меня это сработало (style.scss):

      .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.mat-mdc-form-field-infix {
  min-height: 13px !important;
}

Answer 10

Применить изменение к селектору . В Sass это будет:

      .mat-form-field {
  .mat-form-field-infix {
     height: 16px;
  }
}

Answer 11

Вы можете сделать глубокий контроль значения отступа стиля контура:

          ::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
  padding: .5em;
}

Для меня это было хорошее решение

Answer 12

Если вы не используете «mat-label» внутри «mat-select», то ниже css будет работать

      ::ng-deep {
    .mat-form-field-infix {
        border: 0px !important;
    }
    .mat-form-field-appearance-outline .mat-select-arrow-wrapper {
        transform: none !important;
    }
}

До:

После:

Answer 13

Вот что я использовал:

.small-input.mat-form-field-appearance-outline .mat-form-field-infix {
    padding: .25em 0 .75em 0;
    font-size: 14px;
}
.small-input.mat-form-field-appearance-outline .mat-form-field-infix .mat-select-arrow{margin-top: 10px;}
.small-input.mat-form-field-appearance-outline .mat-select-empty + .mat-form-field-label-wrapper .mat-form-field-label{margin-top: -0.75em;}

Answer 14

Если кто-то еще сталкивается с той же проблемой, может установить высотуmat-inputследуя этому простому методу. Дайте класс для вашего ввода, например

          <mat-form-field appearance="outline"  class="small-height-input">              
       <input matInput placeholder="Email">                    
    </mat-form-field>

Войдите в свойstyle.scssдобавить этот код

      .small-height-input{
  max-height: 46px; 
  width: 300px;
  border-radius: 4px;
  font-size: 12px !important;// decrease the font size  to set height
  .mat-input-element{ 
    font-size: 16px !important;  //increase the size of input font
  }
}

Answer 15

Эта «проблема» невозможности скрыть плавающую метку упоминается здесь: https://github.com/angular/components/issues/11845

Упомянутый хороший обходной путь заключается в том, чтобы не включать mat-label в ваше поле mat-form-field и добавлять его в ваш css, локальный или глобальный. Вам может понадобиться использовать ::ng-deep.

      .mat-form-field:not(.mat-form-field-has-label) .mat-form-field-infix {
  border-top-width: 0;
}

Answer 16

Это сработало для меня:

преобразование: транслироватьY(0) масштаб (.75);

применил это с помощью ::ng-deep, например:

      .api-key-input {
  border-radius: 4px;
  background-color: white;
  flex-direction: row;
  width: 5rem !important;
  ::ng-deep {
    transform: translateY(0) scale(0.65);
    .mat-mdc-form-field-subscript-wrapper {
      width: unset !important;
    }
    .mat-form-field-label-wrapper {
      top: -0.5em;
    }
  }

изменилось с этого:

и при нажатии метка и ввод пропадали

к этому:

размер без корректировок был размером черной строки.

удачи

Answer 17

Вот еще один подход:

/* Angular Material Overrides */
.mat-form-field-appearance-outline .mat-form-field-outline {
  color: #ccc; /* Override outline color. */
}

.mat-form-field-appearance-outline .mat-form-field-infix {
  padding: .65em 0; /* Original top/bottom value was 1em. */
}


.mat-input-element {
  position: relative;
  top:  -1.2em; /* Adjust accordingly to keep placeholder/input text vertically centered. */
}

.mat-form-field-label-wrapper {
  top: -1.2em; /* Adjust accordingly to keep <mat-label> text vertically centered. */
}

Answer 18

вы можете добавить собственный CSS в свой компонент. Высоту поля mat-form-field можно настроить, установив свойство высоты его контейнера.

Например, если ваше поле mat-form-field находится внутри элемента div с именем класса «my-container», вы можете добавить собственный CSS, определив новый класс в CSS-файле вашего компонента:

      .my-container .mat-form-field-outline {
   height: 60px;
}

Затем вы можете добавить класс «my-container» к элементу div, содержащему поле mat-form:

      <div class="my-container">
   <mat-form-field appearance="outline">
      <!-- your form field content here -->
   </mat-form-field>
</div>

Answer 19

Вот мое недавнее решение для поля высотой 32 пикселя с закругленными углами.

  & .mat-form-field-wrapper {
    height: 44.85px;

    & .mat-form-field-flex {
      height: 32px;

      & .mat-form-field-outline {
        $borderRadius: 25px;
        height: 28px;

        & .mat-form-field-outline-start {
          border-radius: $borderRadius 0 0 $borderRadius;
          width: 13px !important; // Override Material in-line style
        }

        & .mat-form-field-outline-end {
          border-radius: 0 $borderRadius $borderRadius 0;
        }
      }

      & .mat-form-field-infix {
        left: 4px;
        padding: 0;
        top: -7px;

        & .mat-form-field-label,
        & .mat-input-element {
          font-size: 12px;
        }

        & .mat-form-field-label-wrapper {
          top: -1.04375em;

          & .mat-form-field-label {
            height: 16px;
          }
        }
      }
    }
  }

Answer 20

Добавить этот стиль

      ::ng-deep.mat-form-field-infix {
  border: 0;
  height: 45px;
}
::ng-deep.mat-form-field-appearance-outline .mat-form-field-label{
  top: 2.35em
}
mat-label{
  font-size: 13px;
}

Answer 21

Вы можете добавить это в файл CSS или файл scss на произвольную высоту дляmat-form-filed:
Пример: исправить до 32 пикселей
От: 1 До: 2

Answer 22

Я нашел отличное решение для вашей проблемы.'mat-form-field' - это контейнер, 'input' внутри, поэтому, чтобы изменить размер ввода, вам нужно изменить размер контейнера, это будет размер поля ввода, затем изменить размер ввода - его размер шрифта, который вы используете

      <mat-form-field appearance="outline" style="font-size:3px;width: 70%">

<input style="font-size:15px" matInput placeholder="Placeholder">

</mat-form-field>

Answer 23

Вы используете флексбокс? Если вы используете flexbox, у вас может быть этот код.

код React CSS в JS

      <div style={{ display: "flex" }}>
    <div>
      <div>element1</div>
      <div>sdfsdfsf</div>
      <div>sdfsdfsf</div>
    </div>
    <input>element2</input>
    <input>element3</input>
  </div>

Вероятно, входные данные, содержащие значения element2 и 'element3, будут изменяться по высоте, поэтому, чтобы этого избежать, вам нужно обернуть их в другой div (таким образом, ввод принимает реагирующие относительные размеры оболочки, которые не имеют flex ), как этот код:

      <div style={{ display: "flex" }}>
    <div>
      <div>sdfsdfsf</div>
      <div>sdfsdfsf</div>
      <div>sdfsdfsf</div>
    </div>

    <div>
      <input>element2</input>
    </div>
    <div>
      <input>element3</input>
    </div>
  </div>

Answer 24

Решение для:

      "dependencies": {
    "@angular-eslint/builder": "^16.0.3",
    "@angular-eslint/schematics": "^16.0.3",
    "@angular/animations": "^16.0.0",
    "@angular/cdk": "^15.2.9",
    "@angular/common": "^16.0.0",
    "@angular/compiler": "^16.0.0",
    "@angular/core": "^16.0.0",
    "@angular/forms": "^16.0.0",
    "@angular/material": "^15.2.9"
}

// стиль.scss

      $height: 30px;
$font-size: 13px;
::ng-deep {
    .mat-mdc-text-field-wrapper.mdc-text-field {
        height: $height !important;
    }
    mat-label {
        font-size: $font-size;
    }
    .mat-mdc-text-field-wrapper
        .mat-mdc-form-field-flex
        .mat-mdc-floating-label {
        top: 13px;
    }
    .mat-mdc-text-field-wrapper.mdc-text-field--outlined
        .mat-mdc-form-field-infix {
        padding-top: 0;
        padding-bottom: 0;
        height: $height;
    }
    .mat-mdc-form-field-flex {
        height: $height;
    }
    .wrapper .table-title .filter .search-placeholder-icon {
        font-size: 18px;
        padding-top: 8px;
    }
    .mdc-floating-label--float-above {
        font-size: $font-size !important;
    }
    .mat-datepicker-input {
        padding-top: 3px !important;
        font-size: $font-size !important;
    }
}

Answer 25

Это сработало для меня:

      ::ng-deep .mat-form-field-infix {
    height: 25px;
    font-size: 12px;
}