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>
itkaufmann pro premium priority commented 2 weeks ago
Unfortunately the workaround is also not working. Is this issue still on your to-do list?
Arkadiusz Idzikowski staff commented 2 weeks ago
This issue is still on our to-do list and it is a high priority task so the problem should be fixed in the next update. But we can't provide an ETA for this release yet.
If the workaround does not work, could you please edit your post and provide a full HTML/TS code on which we will be able to reproduce the problem? We tested the workaround on a simple example similar to the one from your snippet and it worked correctly.
itkaufmann pro premium priority commented a week ago
Ok thanks for the info. I guess we will just wait for the next update.
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