Topic: Input border through label
If I show my input label conditionally by adding a *ngIf to the label, then the border of the input field goes through the label text.
<mdb-form-control [formGroup]="formGroup()">
<input mdbInput
type="text"
id="id"
class="form-control"
formControlName="name" />
<label *ngIf="conditionSignal()"
mdbLabel
class="form-label"
for="id">Label</label>
</mdb-form-control>
When I remove the ngIf it is working as expected
It seems like this is something we will need to fix on our end so I added it to our to-do list.
As a workaround for now you could try to hide the label text instead of removing the whole element with mdbLabel directive (which is used to calculate the border gap).
For example:
<label
mdbLabel
class="form-label"
for="id"><span *ngIf="conditionSignal()">Label</span>
</label>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: MDB5 7.1.0
- Device: Lenovo
- Browser: Chrome
- OS: Windows 11
- Provided sample code: No
- Provided link: No