Topic: Does MDB5 Toggle Switch support having a label on either side of the switch like in MDB4 Pro?
Bakke premium asked 1 year ago
Expected behavior
Something akin to the MDB4 Pro Toggle Switch functionality as shown here: https://mdbootstrap.com/docs/b4/angular/forms/switch
The Material Switch supported 2 labels, one on either side to clearly show which user-friendly value was toggled. This is the visual functionality I am looking for in MDB5.
Actual behavior
Attempting to use 2 labels results in both labels being put to the right side of the switch as shown here:
And here is the code for it:
<div class="form-check form-switch">
<label class="form-check-label">New Vehicle</label>
<input
mdbCheckbox
mdbValidate
type="checkbox"
formControlName="renewal"
class="form-check-input" />
<label class="form-check-label">Renewal</label>
</div>
Resources (screenshots, code snippets etc.)
Rafał Seifert free answered 1 year ago
Please try to use simillar html structure as we did in MDB4. Here is the code that should satisfy your needs:
<label class="form-check-label d-flex">
New Vehicle
<div class="form-check form-switch mx-3">
<input
mdbCheckbox
mdbValidate
type="checkbox"
formControlName="renewal"
class="form-check-input"
/>
</div>
Renewal
</label>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Premium
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: MDB5 5.0.0
- Device: any
- Browser: any
- OS: any
- Provided sample code: No
- Provided link: Yes