<div class="questions" style="font-size:13pt;margin-left:20px;margin-bottom:10px;">
<p class="question" id="ques{{i+1}}" style="font-size:17pt;font-weight:normal">{{i+1+". "+a.question}}</p>
<img *ngIf="isImage[i]" [src]="a.image" class="img-responsive" style="height:30%;width:30%;padding-left:20px;border-radius: 0;">
</div>
<div style="font-weight:normal;font-size:15pt;margin-left:20px">
<form name="quizform" id="option">
<label id="label_1_{{i}}"><input id="1_{{i}}" type="radio" name="q{{i}}" value="{{a.option1}}"> A) {{a.option1}}</label><br/>
<!-- [(ngModel)]="ans.answer" (click)="getAnswer(i,$event.target.value,$event.target.id)" -->
<label id="label_2_{{i}}"><input id="2_{{i}}" type="radio" name="q{{i}}" value="{{a.option2}}"> B) {{a.option2}}</label><br/>
<label id="label_3_{{i}}"><input id="3_{{i}}" type="radio" name="q{{i}}" value="{{a.option3}}"> C) {{a.option3}}</label><br/>
<label id="label_4_{{i}}"><input id="4_{{i}}" type="radio" name="q{{i}}" value="{{a.option4}}"> D) {{a.option4}}</label><br/><br/>
</form>
</div>
My goal is to include radio buttons inside the label so that when a user clicks on the label, the radio button is selected. However, I am facing an issue where it overlaps with the label tag. Here is what my CSS file looks like:
#option {
margin-left: 10px!important;
}
#wrapper {
width: 100%;
height: auto;
display: flex;
align-items: center;
justify-content: center;
}
label {
font-size: 16pt;
font-weight: normal;
padding-left: 15px;
margin-top: -10px
}
#quiz {
width: 75%;
height: auto;
margin-top: 15px;
text-align: left;
padding: 0px 50px 0px 50px;
margin-bottom: 20px;
}
input {
position: absolute;
margin-top: 0px;
}
That sums it up.