Material-design-lite: Checkbox Label overflow

[steamonimo]

The first time I have seen this behaviour was on my mobile phone. If the label of a checkbox is longer than there is horizontal space the label will wrap at the end of the line. This however does not reposition the following block objects. Thus the label will float over the next block object.

Here is the codepen to demonstrate the problem on the desktop:
http://codepen.io/steamonimo/pen/aOeOVg

BTW: On a personal note I think that the textfield should use the same font as the input field. But this is just personal preference.

Thanks for listening,
Holger

[surma]

Thanks for the Codepen! The label definitely needs to expand vertically here. Although I suggest we talk to the MD team how this is supposed to behave.

[rj33]

I ran into this too. I'm guessing it is due to the use of absolute positioning of some of the checkbox children, so even when wrapped in a block element, the label doesn't take up its proper size. As a brutally ugly workaround you can put a couple of br tags in to force separation of the next element, but this is far from ideal in a responsive design, as the number of br tags required changes with screen size.

Is there any guidance on a better workaround pending feedback from the MD team on the correct behaviour here? I would guess a proper fix might require a rethink of the positioning strategy used for the mdl-checkbox children.

[surma]

I have to admit that I forgot to ask this the last time we talked to the MD team, because I forgot to tag it properly. Will try to rectify asap.

[remkoboschker]

+1

[remkoboschker]

Is there any progress on this issue?

[remkoboschker]

Not fixing the label height at 24 px seems to solve the issue

.mdl-checkbox {
  height: 100%
}

[gpgekko]

I know it is a completely unrelated documentation page, but the concept of wrap-and-truncate at http://www.google.com/design/spec/components/tabs.html#tabs-content seems interesting for this

[dsebastien]

+1

[remkoboschker]

Setting the height of the checkbox to 100% in combination with the display: inline-block does however introduce layout issues in internet explorer and firefox when the checkbox is follow by some other content.

[remkoboschker]

I managed to find a fix that work on all browsers.

.mdl-checkbox {
  height: auto
}

inherit works aswell

[remkoboschker]

Setting height at auto or inherit introduces a new issue. If set, the placement of the checkbox is off when the label text is empty.