Material: radio-group: formatting issue when inside md-input-container with label

[jaufgang]

When wrapping a md-radio-group inside an md-input-container with a label, the label overlaps the first radio button. This should format similarly to other input types in order provide consistent formatting over a form

Here's a codepen to illustrate the problem: http://codepen.io/anon/pen/QjoYKE

[jaufgang]

Update: Explicitly adding class="md-input-has-value" to the md-input-container wrapping the md-radio-group improves the formatting significantly by showing the smaller label.

I see that the documentation for md-input-container only states it is to be used with input and textarea elements, but it does also work with md-select. It would be nice to be able to use labels and md-input-container for all form elements in order to provide consistent formatting of a form.

For a form element such as md-radio-group it doesn't make sense to have the label change sizes depending on whether or not it has a value. Perhaps the md-input-container directive should automatically style it's labels with the smaller format if the form element it contains is checkboxes or radios.

[tonyeung]

+1 just came across this

[mattdanna]

+1 also ran into this issue.

[pdore-netfore]

+1

[mribichich]

+1

[ThomasBurleson]

This issue is closed as part of our ‘Surge Focus on Material 2' efforts.
For details, see our forum posting @ http://bit.ly/1UhZyWs.

[robert-blankenship]

+1 Definitely was a tricky one, adding class="md-input-has-value" as recommended made a significant improvement

[jakobadam]

You might also want to add the md-input-invalid class manually to get errors shown in the container...

<md-input-container class="md-input-has-value"
          ng-class="{ 'md-input-invalid' : form.x.$invalid && form.$submitted }">
...

Example: https://codepen.io/jakobadam/pen/xqZoBR