Ionic-framework: get rid of radio buttons in ion-select popover.

Created on 10 Jul 2017  路  9Comments  路  Source: ionic-team/ionic-framework

This applies for ionic 2+

<ion-select> displays its list using radio buttons when the popover interface is selected. Radio boxes don't really add anything here and look ugly, especially for android (iOS looks ok because the radio boxes don't display anything for unselected items).

It makes sense to use radio buttons for the Alert interface because the user can select and item and then change their selection before hitting the "ok" button. The popover interface doesn't have an "ok" button so the radio boxes really don't seem to belong there.

The action-sheet interface doesn't have radio buttons, so it seems that there is no reason the popover interface needs to have them.

core feature request

Most helpful comment

I agree with this. We should match the Material Design spec:

Adding to my to-do list for Ionic 4.x. Thanks!

All 9 comments

I agree with this. We should match the Material Design spec:

Adding to my to-do list for Ionic 4.x. Thanks!

Any workaround for ionic 3 I am trying to hide through display: none; it is not working at all.

I put this CSS in my app.scss and it hid the radio buttons.

.radio .radio-icon {
display: none;
}

Probably the best solution for me, put these lines in variable.scss and it hides radio buttons for entire app to match material design;

$radio-md-icon-width: 0;
$radio-md-icon-height:0;
$radio-md-icon-border-width:0;
$radio-md-icon-border-radius:0;

Still radio button are appearing ? Any solution for this.

Coming upon this as well. Would be great to have a way to remove these other than adjusting global css variables lol

I agree with this. We should match the Material Design spec:

Adding to my to-do list for Ionic 4.x. Thanks!

Why hasn't this been done yet?

While we would love to fix every issue, there are almost 800 issues reported at the time of this comment and issues without workarounds get higher priority. It's not ideal but it is possible to use CSS to hide the radio in Ionic 4, see this Codepen: https://codepen.io/brandyscarney/pen/qBBoNNb

We always welcome PRs for getting issues prioritized faster. Thanks!

Why is that code not working in my case? I can't even style any ionic component. Am i missing something?

Was this page helpful?
0 / 5 - 0 ratings