Ionic2 - ion-select element at RTL

Ionic Framework ionic-v3
1

I use angular2 and ionic 2.
My app support multy-languages.
When user click “change to hebrew” the following code is computed:

  this.platform.setDir('rtl', true);
  this.translate.use('he');

However, all the app move to rtl well.
But the ion-select element have not good look. You can see at the picture.
The radio-buttons are overflow the box, the labels and the title are align to left instead of right.
Any solution?

Here is a link to picture:

2

Hi, try to add the following lines to variables.scss located in src/theme folder:

html[dir=“rtl”]{
body{
.alert-radio-group{
.button-inner{
.alert-radio-icon{
left: -23px;
}
.alert-radio-label{
text-align: right;
padding: 13px 35px;
}
}
}
}
}

1 Like