Radio Button List - Anyway to align the Button left?

ionic-v1
1

Hi,

I am using the Ionic1 example to create a Radio Button List. However, I need the check mark to appear in the left and the text to be at the right. Direction= RTL won’t do. Any ideas?

<ion-list>
  <ion-radio ng-model="choice" ng-value="'A'">Choose A</ion-radio>
  <ion-radio ng-model="choice" ng-value="'B'">Choose B</ion-radio>
</ion-list>

image

Thanks

2

I’m sorry I don’t have an answer for this question but I use a radio list in my ionic 3 app and also want to be informed of replies.

The docs don’t seem to have any relevant info for this…

1 Like
3

Same here guys, using Ionic 2 :smiley: It seems that the <ion-radio> is quite hard to align ^^

4

In Ionic2 and 3 I think you can just add item-left to the <ion-radio> and it will do.

3 Likes
5

It works but to a small extent for me.

6 
<ion-item>
   <ion-label>Check appears on the left</ion-label>
   <ion-radio item-left></ion-radio>
</ion-item>
1 Like
7

This only works with Ionic2. I am looking for a solution in Ionic1. Thanks

8

You can change the css of
.item-radio .radio-icon

For that you also have to add some padding to the list items to accomodate the radio button

9

If you guys are looking for this, then the following should work for most of you:

<ion-list>
  <ion-item>
    <ion-label text-right>Radio Button</ion-label>
    <ion-radio item-left></ion-radio>
  </ion-item>

  <ion-item>
    <ion-label text-right>Check Box</ion-label>
    <ion-checkbox></ion-checkbox>
  </ion-item>
</ion-list>

This will place the icons at the left edge and the text at the right edge of the screen, rather than placing the icons and the text adjacent to each other.

10

Thanks, but again this only works with Ionic2. I am looking for a solution in Ionic1.

1 Like
11

I’ve not personally checked out v1 apps yet, but there must be some classes available there too for doing this. Have you checked out the documentation for that?

12

Yes, nothing about this. Ionic2 is easier when it comes to customization.

13

Hm, okay. I’ll let you know if I find something.

14

I think you should try doing it manually something like this:

<ion-list>
    <div class="item">
      <span style="float: left; margin: 20px;"><ion-radio></ion-radio></span>
      <span style="float: right; margin: 20px;">Choose A</span>
    </div>

    <div class="item">
      <span style="float: left; margin: 20px;"><ion-radio></ion-radio></span>
      <span style="float: right; margin: 20px;">Choose B</span>
    </div>
</ion-list>

Does this work?

15

Thanks for sharing this. Here is what is does:
image

I added the following CSS:

.item-radio 
{
border: 0px;
padding: 0;
height: 40px
}

The result is:
image

It still needs some work to remove the gray background when the radio is selected. Any idea?

16

For an immediate work around you can do this:

<ion-list>
    <div class="item">
       <span style="float: left;"><ion-radio></ion-radio></span>
       <span style="float: right;">Choose A</span>
   </div>
</ion-list>

… and in the CSS:

.item-radio input:checked + .radio-content .item-content {
    background: inherit;
}

.item-radio .radio-icon {
    padding: 0px;
}

But as you know we are doing it manually, so the radio is not stretching the whole width. In effect, you’ve to touch the rectangle in the left to check/un-check the radio. That’s why I’ve kept the border intact, else there won’t be any visual cue as to where to touch/click.

17

Forget everything above, I’ve tweaked it to look almost perfect now! Do it like this:

In the CSS file:

.myradio-text {
    float: right;
}

.myradio-icon {
    float: left;
}

.myradio-icon label {
    border: none;
}

.item-radio .item-content {
    padding-right: 10px;
}

.item-radio .item-content .radio-icon {
    padding: 0px;
}

… and in the template create the items like this:

<ion-list>

  <!--Radio 1-->
  <ion-item class="item">
    <label class="item item-radio">
      <input type="radio" name="radio-group" value="on">          
      <div class="radio-content">
        <div class="item-content disable-pointer-events" ng-transclude="">
          <div class="myradio-icon">
            <ion-radio></ion-radio>
          </div>
          <div class="myradio-text">
            <span>Choose A</span>
          </div>
        </div>
      </div>
    </label>
  </ion-item>

  <!--Radio 2-->
  <ion-item class="item">
    <label class="item item-radio">
      <input type="radio" name="radio-group" value="on">          
      <div class="radio-content">
        <div class="item-content disable-pointer-events" ng-transclude="">
          <div class="myradio-icon">
            <ion-radio></ion-radio>
          </div>
          <div class="myradio-text">
            <span>Choose B</span>
          </div>
        </div>
      </div>
    </label>
  </ion-item>

</ion-list>
18

Thanks for sharing this but it didn’t work with me.

Here is how it looks before selecting:
image

And this is what happens after selecting:
image

19

Then may be some classes are platform specific, although I didn’t think so.

Try the earlier code I sent with just the border showing, I’ve removed the grey background from it as you had asked for.

20

Post your css and template code too so that I can look into it.