Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


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: MDB5 Toggle Switch with 2 labels

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>


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • 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