CODEWITHSUNDEEP
htmlcssangularangular-material
Ross
Ross

Reputation: 415

Re-positioning an Material label control

I am having an issue positioning a block of text with an HTML Label element. This element wraps up a mat-form-field input control and as the screen shot shows the label text lines up at the bottom of the input control, when it should line up in the center. enter image description here

As you can see the Trader Reference [07] text is too low I need to move it up by a few pixels but everything I have tried fails.

I should mention I am trying to use Angular Material controls

Code as follows

<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>

and here's the 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;
}

Upvotes: 3

Views: 11404

Answers (2)

Andrea Moretti
Andrea Moretti

Reputation: 73

I know this is very old issue, but in Angular 16 I figured out that the label position is determined by the width of <div class="mdc-notched-outline__leading"></div> before the label. You can set the width just overriding the class using !important. For example I set this:

.mdc-notched-outline__leading {
    width: calc(40% - 8px) !important;
}

For this result: enter image description here

The problem is, when the input is empty, the placeholder will have the same space: enter image description here

enter image description here

But I think that using JS/TS instead of pure CSS/SCSS it will be more easy even to handle empty input.

Hope this helps!

Upvotes: 0

Marshal
Marshal

Reputation: 11101

The matInput directive assigned to the input is definitely the cause of the issue; removing it from the input resolves the alignment. There is something in the mat-input-element class that is applied to the input responsible... when I remove that class from the input in dev tools the issue also goes away.

  • I have overridden every style in that class and cannot seem to figure out what is unique to that class causing this issue... unfortunately, short of digging into the library source I am at a loss as to what the root issue is here with the mat-input-element class.

You could possibly explore something along these lines to disassociate your label from the matInput as an alternative solution.

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

Upvotes: 3

Related Questions