Checkbox check mark not rendered when text contains HTML tags

[ghost]

Prerequisites

• [x] I am running the latest version
• [x] I checked the documentation and found no answer
• [x] I checked to make sure that this issue has not already been filed
• [x] I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

A checkbox should be checkable, even when the text next to the checkbox contains HTML tags

Current Behavior

If you put HTML tags in the text, like <strong>some text</strong> then the checkbox gets checked or unchecked internally, but visually the box remains unchecked

Failure Information (for bugs)

Steps to Reproduce

Create a checkbox, just as prescribed by the documentation. As text, after the and before the tag, use e.g.

this is the <strong>first</strong> checkbox

Observe that the checkbox renders but will not display the checked 'V' mark when checked

In my case, I wanted to add an icon before the text to indicate file type using the <i> tag. I noticed I can put whatever tag in whatever position in the text, it will cause this issue. There is no issue without HTML tags in the text

[groovemen]

Hello @FirstWarden,

Thank you for using our products and we are sorry for this late response. The problem could be solved by replacing the "+" sign with "~" in the _checkbox.scss file from line 90 to 109 like this:

• from this:

&:checked {
  & + .form-check-sign .check {
    background: $mdb-checkbox-checked-color;
  }

  & + .form-check-sign .check:before {
    color: #FFFFFF;
    box-shadow: 0 0 0 10px,
                10px -10px 0 10px,
                32px 0 0 20px,
                0px 32px 0 20px,
                -5px 5px 0 10px,
                20px -12px 0 11px;
    animation: checkboxOn $mdb-checkbox-animation-check forwards;
  }

  & + .form-check-sign:before {
    animation: rippleOn $mdb-checkbox-animation-ripple;
  }

  & + .form-check-sign .check:after {
    animation: rippleOn $mdb-checkbox-animation-ripple forwards;
  }
}

• to this:

&:checked {
  & ~ .form-check-sign .check {
    background: $mdb-checkbox-checked-color;
  }

  & ~ .form-check-sign .check:before {
    color: #FFFFFF;
    box-shadow: 0 0 0 10px,
                10px -10px 0 10px,
                32px 0 0 20px,
                0px 32px 0 20px,
                -5px 5px 0 10px,
                20px -12px 0 11px;
    animation: checkboxOn $mdb-checkbox-animation-check forwards;
  }

  & ~ .form-check-sign:before {
    animation: rippleOn $mdb-checkbox-animation-ripple;
  }

  & ~ .form-check-sign .check:after {
    animation: rippleOn $mdb-checkbox-animation-ripple forwards;
  }
}

Hope that information helps you. Please let us know if we can help you with anything else.

All the best, Stefan