ionRadio inline display?

Hello how to display ion radio inline?

Do you mean radio or check box?

You can extend a directives template, are change them to what ever you want.

I had to hack this in with styling with my app. I used the check boxes since they had the look I wanted, then built my own functionality. I have this set to remind me when I get home to post a screen shot and my styling.

You may want to look at this Codepen : http://codepen.io/anon/pen/GJjJqe

Style has been done using SASS, so way less repetition.
This does the trick :

.list.list-inline {
  @include display-flex();
  @include flex-direction(row);
  @include flex-wrap(nowrap);
  width: 100%;

  .item {
    @include flex();
    font-size: inherit;
  }

  /* Radio item */
  .item-radio {
    .item-content {
      /* give some room to the right for the checkmark icon */
      padding: $item-padding - 4;
      padding-right: $item-padding;
    }

    .radio-icon {
      /* checkmark icon will be hidden by default */
      padding: floor($item-padding / 3);
    }
  }

  /* Checkbox */
  /* /!\ not fully working with long-text on */
  .item-checkbox {
    padding-left: ($item-padding * 1) + $checkbox-width;
    // border: none;

    .checkbox {
      padding-left: 0;
    }
  }
}
1 Like