I've been attempting to center the text in the span tag within the input field, but using "text-align": center in my css doesn't seem to be working as expected.
Interestingly, when I switched the span tag to a paragraph tag, it caused the input field to expand.
This is the code snippet:
<div class="nxui-form-group">
<label for="external-realisation">
<img src="assets/images/purchase_order.svg" class="nxui-icon-small nxui-icon-align-bottom">
{{ 'i18n.all-damage-reports.label.external-realisation' | translate }}
</label>
<div *ngIf="!isExternal">
{{ 'i18n.all-damage-reports.label.without-order' | translate }}
</div>
<div *ngIf="isExternal" class="nxui-label-plus-field">
<span class="nxui-non-breakable-label">{{ 'i18n.all-damage-reports.label.with-order' | translate }} </span>
<input [nxuiPlaceholder]="'i18n.all-damage-reports.label.external-realisation' | translate"
[title]="'i18n.all-damage-reports.label.external-realisation' | translate"
class="nxui-form-control"
formControlName="company"
id="external-realisation"
pInputText
>
</div>
</div>
Adding the paragraph tag shifts the layout like this:
https://i.sstatic.net/2UPo6.png
With the span tag:
https://i.sstatic.net/VPU7h.png
Solution to my query:
.nxui-label-plus-field {
display: flex;
align-items: center;
}
.nxui-non-breakable-label {
white-space:nowrap ;
}
Any help or suggestions would be greatly appreciated.
Thank you.