How to create horizontal radio button group?

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…

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

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

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

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.

You can also try turning off ellipses using this css:

white-space: nowrap;
overflow: visible;

You could refer my codepen
Hope it helps.


Nice work
thanks for your code

Do you have this for ionic 2?


add this CSS:

ion-list {
    display: inline-flex;

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


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;.

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

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

I think the guy was sincerely thanking you.


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

1 Like