How to create horizontal radio button group?

1

I am using ionic framework apps development. I want to create horizontal radio buttons group not vertical. Ionic default vertical radio buttons

Please help me…

2

Have you tried using button-bar or the Grid? Have a look at the CSS docs.

1 Like
3 
 <div class="button-bar" >         
    <ion-radio ng-repeat="item in clientSideListRadioButton"
                   ng-value="item.value"
                   ng-model="defaultRadioChecked.radioChecked" ng-click="changedRadioValue(item)"     style="width:33.5%">
          {{ item.radioText }}
        </ion-radio>
    
  </div>

I have three radio button. 1.Approved.2 Rejected 3.Reviewed.
Problem is that button text display 1.A… 2. R… 3.R… like that
Please help me to display full text fit to radio button…

1 Like
4

This seems to be due the amount of space given to the checkbox itself.

You might be able to use CSS to change this - removed the padding and the margins, or use spans inside the buttons.

I think a togglable button would suit you better, no? You’d have to code the IU yourself though as Ionic doesn’t have them I don’t think.

5

You can also try turning off ellipses using this css:

white-space: nowrap;
overflow: visible;
6

You could refer my codepen http://codepen.io/niyando/pen/GpEeQR
Hope it helps.

5 Likes
7

Nice work
thanks for your code

8

Do you have this for ionic 2?

4 Likes
9

add this CSS:

ion-list {
    display: inline-flex;
}

on iOS, apply the same CSS to .list-ios

2 Likes
10

Genius. How do you get them to distribute evenly across?

Kinda off topic, but I need them to change a photo on selection. Each radio has its own photo. Any idea on how to do this?

EDIT: Tried justify-content on the container (the form), but that didn’t work. Got it to center align the text-align: center;.

11

This is my first post, I’m trying to help and you welcome me with sarcasm?
Fine, I’ll never help again

12

I’m sorry, maybe my message was confusing, but I was not being sarcastic. Your solution worked for me. I was hacking at it, but I didn’t figure it out. Thank you.

1 Like
13

I think the guy was sincerely thanking you.

2 Likes
14

Thanks for your code. Finally a simple and elegant solution!

1 Like