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