Skip to content
GitLab
Closed
Issue created by Administrator@rootContributor

custom-checkbox broken when not using label next to checkbox

Created by: Gillardo

When reporting a bug, include:

  • Operating system and version (Windows)
  • Browser and version (Chrome 52.0.2743.116 m (64-bit))

image

Code to reproduce, as you can see i am using a form, so no need to have a description

    <div class="row form-group">
        <label class="col-sm-2 col-form-label">Legend</label>
        <div class="col-sm-10 col-md-7">
            <label class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" />
                <span class="custom-control-indicator"></span>
            </label>
            <div class="text-muted">
                Display legend
            </div>
        </div>
    </div>

I have also tried adding a blank custom-control-description class to the html, so it looks like this, and again, still same line up issue

    <div class="row form-group">
        <label class="col-sm-2 col-form-label">Legend</label>
        <div class="col-sm-10 col-md-7">
            <label class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" />
                <span class="custom-control-indicator"></span>
                <span class="custom-control-description"></span>
            </label>
            <div class="text-muted">
                Display legend
            </div>
        </div>
    </div>

If however, i use custom-control-description and ever in a single character, it lines up fine, as you can see here

image