Hi
I have created an app using ionic2. There I have radio button and some .scss. Style of radio is not working well and in another app select menu is not working
but working very well in lollypop. Does anybody have any idea ??
below r details
quiz.html
<ion-list *ngFor="#q of qus" radio-group [ngClass]="{view: q.show}">
<ion-list-header>
{{q.ask}}
</ion-list-header>
<ion-item *ngFor="#opt of q.options" [ngClass]="{incorrect: opt == q.given, correct: q.ans == opt}">
<ion-radio [value]="opt" item-left (click)="answerIt(q,opt)"></ion-radio>
<ion-label>{{opt}}</ion-label>
</ion-item>
</ion-list>
quiz.ts
import {Page} from 'ionic-angular';
@Page({
templateUrl: 'build/pages/quiz/quiz.html'
})
export class ListPage {
qus: Array<any> = [];
points: number = 0;
constructor() {
this.qus = [
{'ask' : 'Question1', 'ans' : 'option-1' , options :['option-1', 'option-2', 'option-3', 'option-4'], show: false, given: ""},
{'ask' : 'Question2', 'ans' : 'option-3' , options :['option-1', 'option-2', 'option-3', 'option-4'], show: false, given: ""},
{'ask' : 'Question3', 'ans' : 'option-4' , options :['option-1', 'option-2', 'option-3', 'option-4'], show: false, given: ""},
{'ask' : 'Question4', 'ans' : 'option-2' , options :['option-1', 'option-2', 'option-3', 'option-4'], show: false, given: ""}
];
}
answerIt(q, ans) {
q.show = true;
q.given = ans;
if(q.ans == ans) {
this.points ++;
}else {
//alert("incorrect");
Sass Css Code
.view .incorrect , .view .correct {
color: #fff !important;
.radio-icon {
border-color: #fff !important;
}
.radio-inner {
background: #fff;
}
ion-label {
color: #fff;
}
}
.view .correct { background: #2E7D32 !important; }
.view .incorrect { background: #E53935; }