I came across a problem while trying to position a block of text using an HTML Label element. The label is supposed to be at the center, but it aligns at the bottom of the input control instead. Here's a screenshot for better understanding: https://i.sstatic.net/YL04v.png
The "Trader Reference [07]" text seems too low and I have attempted various methods to adjust it by a few pixels without success.
It's worth mentioning that I'm utilizing Angular Material controls in this scenario.
Here is a snippet of the code:
<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>
Also, here's the associated 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;
}