How to swap label and radio button position Material AngularJS

Question

Material angular lays out radio boxes like this:

o Apple
o Banana

I want this in reverse

Apple  o
Banana o

The md-radio-button has two compenents,

div class="md-container",

and

div class="md-label".

The container holds the button, and the label holds the label.

I can't seem to swap the positions of these divs. When I try to float md-container right, it goes outside of the md-radio-button.

How can I swap the two locations, either using float on the sub-components without breaking outside of the parent radio button, or perhaps some other way?

Thank you

Answer 1

You can do this

 <md-content>
     <span layout="row" layout-align="center center">
         <span>Apple</span>
         <md-radio-button value="1" aria-label="Apple"> </md-radio-button>
     </span>
</md-content>

Answer 2

EDIT:

Add this to your css:

md-radio-button {
  width: 100px;
}

md-radio-button .md-label {
  width: 80%;
  margin-left: 0;
  word-wrap: break-word;
}

md-radio-button .md-container {
  width: 20%;
  left: 100%;
}

Here you can set a width for the md-radio-button component. This lets us align all the radio-buttons no matter the length of the label. If the labels are really long, they will wrap instead of overlap or pushing the radio-button.

First answer:

Add this to your css:

md-radio-button .md-label {
  margin-left: 0;
}

md-radio-button .md-container {
  left: 60px;
}

Or you can do this:

md-radio-button .md-container {
  position: relative;
  transform: translateY(10%);
}

md-radio-button .md-label {
  float: left;
  left: 0;
  margin-left: 0;
  margin-right: 10px;
  min-width: 60px;
}

You will need to adjust the left positioning of the .md-container or min-width of .md-label though based on the longest label. Or you could use the last solution and just not care about min-width and aligning the radio-buttons.

Difference between these two solutions is that in the second one, the labels will never overlap the radiobuttons. At worst, if the label is really long, it will misalign the radiobuttons. The first solution doesn't care about the length of the labels.

Answer 3

<md-radio-button value="1" labelPosition="before" aria-label="Apple"> </md-radio-button>