Изменение положения элемента управления меткой материала

Question

У меня проблема с позиционированием блока текста с элементом HTML Label.Этот элемент оборачивает элемент управления вводом mat-form-field и, как показано на снимке экрана, текст метки располагается внизу элемента управления вводом, когда он должен располагаться в центре.

Как вы видите, текст ссылки трейдера [07] слишком мал, мне нужно переместить его на несколько пикселей вверх, но все, что я пробовал, терпит неудачу.

Я должен упомянуть, что я пытаюсь использовать элементы управления Angular Material

Код следующим образом

<div class = "wrapper">
  <div>
  <mat-accordion>
  <mat-expansion-panel (opened)="panelOpenState = true"
                       (closed)="panelOpenState = false">
    <mat-expansion-panel-header [collapsedHeight]="customCollapsedHeight" [expandedHeight]="customExpandedHeight">
      <mat-panel-title>
     <h4> Declaration Type</h4>
      </mat-panel-title>
    </mat-expansion-panel-header>
    <div class="field">
        <label class= "field-label">Decln Type [01]:
            <mat-form-field>
                <mat-select class="declaration-type-combobox">
                  <mat-option *ngFor="let declarationType of declarationTypes" [value]="declarationType.value">
                    {{declarationType.value}}
                  </mat-option>
                </mat-select>
              </mat-form-field>
        </label>
        <label class= "field-label">Badge Codes:
          <mat-form-field>
              <mat-select class="badge-codes-combobox">
                <mat-option *ngFor="let badge of badges" [value]="badge.code">
                  {{badge.code}} -  {{badge.name}}
                </mat-option>
              </mat-select>
            </mat-form-field>
      </label>
    </div>
    <div class="field">
        <div>
            <label>Trader Referecne [07]:
            <mat-form-field>
                <input matInput>
              </mat-form-field>
            </label>
          </div>
  </div>
    </mat-expansion-panel>
</mat-accordion>
</div> <!--End wrapper-->
</div>

и вот CSS

 .wrapper {
  margin-top: 30px;
  margin-left: 30px;
}

/* contains a label and a value */
.field {
  display: flex;
  margin: 0 0 0 0;
}

.field-label {
  width: 35%;
}

.field-value {
  width: 60%;
  float: right;
}

.field label + label /*label after another label */
 {
  margin-left: 30px;
}

.declaration-type-combobox {
  width: 400px;
  max-width: 400px;
  font-size: 12px;
  border: #673ab7 2px solid;
  border-radius: 5px;
  height: 10px;
  padding: 9px;
}

.badge-codes-combobox {
  width: 200px;
  max-width: 200px;
  font-size: 12px;
  border: #673ab7 2px solid;
  border-radius: 5px;
  height: 10px;
  padding: 9px;
}

.form-field {
  width: 380px;
  max-width: 380px;
  border: #673ab7 2px solid;
  border-radius: 5px;
  font-size: 12px;
  height: 20px;
  max-height: 20px;
}

::ng-deep .mat-select-panel mat-option.mat-option {
  height: unset;
}

::ng-deep .mat-option-text.mat-option-text {
  word-wrap: break-word;
  white-space: pre-line;
  padding: 5px;
  margin: 2px;
  line-height: 15px;
}

::ng-deep .mat-form-field-underline {
  display: none;
}

.mat-expansion-panel-header.mat-expanded {
  background: #673ab7;
}

input {
  border: none;
  background: none;
  padding: 0;
  text-align: left;
  font-size: 12px;
  border: #673ab7 2px solid;
  border-radius: 5px;
  height: 9px;
  padding: 9px;
  width: 200px;
}

Answer 1

Директива matInput, назначенная на вход, определенно является причиной проблемы;удаление его из ввода разрешает выравнивание.В классе mat-input-element есть что-то, что применяется к ответственному вводу ... когда я удаляю этот класс из ввода в инструментах разработки, проблема также исчезает.

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

Возможно, вы могли бы исследовать что-то в этом духе, чтобы отделить ваш ярлык от matInput в качестве альтернативного решения.

<code><div class="field">
        <pre style="padding-top:8px; font: 400 14px/20px Roboto,Helvetica Neue,sans-serif;">Trader Referecne [07]: