In-place Editing of Angular Material Checkbox Label

Question

The following code gives me a checkbox with a label:

<md-checkbox ng-model="data.foo">
  This Label should be editable
</md-checkbox>

Actual state: I can (un)check the box by clicking either the box itself or clicking on the label. The cursor is a pointer over the entire box-label-line.

Desired state: I can (un)check the box only by clicking on the box itself. When hovering the label, cursor should become a text cursor and clicking on it should offer in-place editing.

How can I achieve this?

please post fiddle or plunker, not sure what is the css and markup for md-checkbox — Sheetal, Dec 18 '15 at 05:55

score 1 · Answer 1 · edited Sep 06 '18 at 12:35

Modify the html like this:

<div ng-app="sandbox" class="ng-scope">    
  <md-checkbox ng-model="data.label" aria-label="Editable label" role="checkbox" class="ng-valid md-default-theme ng-dirty ng-valid-parse ng-touched md-checked" tabindex="0" aria-checked="true" aria-invalid="false" style="">
    <div class="md-container" md-ink-ripple="" md-ink-ripple-checkbox="">
      <div class="md-icon"></div>
      <div class="md-ripple-container"></div>
    </div>
  </md-checkbox>
  <div ng-transclude="" class="md-label" style="display: inline-block;">
    <span class="ng-scope">
      This label should be editable
    </span>
  </div>
</div>

Modify the css class md-checkbox, note the display value and the width value.

md-checkbox {
    box-sizing: border-box;
    display: inline;
    margin: 8px;
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding-left: 18px;
    padding-right: 0;
    position: relative;
    line-height: 26px;
    min-width: 18px;
    min-height: 18px;
    width: 18px;

}

Many thanks! Just one question: For what is the div with class "md-container"? Without this div I have the desired state, but with this div I have two checkboxes... See http://jsfiddle.net/4h2bxfqq/ — Markus, Dec 18 '15 at 18:50

In-place Editing of Angular Material Checkbox Label

1 Answers1