md-checkbox : the size of checkbox without a label is wider than it should be

[TalPasi]

When placing a checkbox inside a table cell, I don't want it to have a label, since the header is providing the textual context for it.

The problem is that the label has properties in its css, that makes the checkbox to be wider that it should be, so when I am centering the content of the cell, the checkbox is not entirely centered.

md-checkbox .md-label {
border: 1px dotted transparent;
display: inline-block;
margin-left: 10px;
}

please check the following following for a demo of the problem: codepen

[marcysutton]

@TalPasi fixed this by only adding the margin if a visual label is present–it was an easy hook to differentiate between checkboxes with text vs. without.

One note: your checkbox in the table cell still needs a label for accessibility. You can do this one of two ways:

Add aria-label to the checkbox

<table>
    <th>Selected</th>
    <tr>
      <td>
         <md-checkbox aria-label="Selected"></md-checkbox>
      </td>
      </tr>
  </table>

Add aria-labelledby to the checkbox pointing to a table header ID

<table>
    <th id="selectedHeader">Selected</th>
    <tr>
      <td>
         <md-checkbox aria-labelledby="selectedHeader"></md-checkbox>
      </td>
      </tr>
  </table>

If the second version logs a warning to the console, we should open an issue and fix it since it's a valid approach to labeling.