Topic: Radio Buttons not showing up
<form [formGroup]="kobForm">
<div class="md-form">
Please select one:
<fieldset *ngFor="let opt of kobs" class="form-group">
<input formControlName="kob" type="radio" [id]="'kob_'+opt.value" [value]="opt.value" [(ngModel)]="kob">
<label [for]="'kob_'+opt.value">{{opt.name}}</label>
</fieldset>
</div>
</form>
The left side is the demo on your website where I clicked on "Option 2" In this case, it has turned blue as the ::after css has been properly activated on the label. On the right side is a project that I'm working on. In this case, the radio is fine when unselected (not checked) but, when I check it, the radio disappears. For some reason, the ::after css is not being applied and this is where I'm stuck!
Hope that helps!
-Jaron Dawid Adach pro commented 7 years ago
Thanks for clarification, could you also attach the source code of your form?JaronRH pro commented 7 years ago
Did you need something more then what is in the original post? (sorry, I can't make everything public!)
<form>
<divclass="md-form">
Please select one:
<fieldset *ngFor="let opt of kobs"class="form-group">
<inputtype="radio" [id]="'kob_'+opt.value" [value]="opt.value" [name]="'opt.name'">
<label [for]="'kob_'+opt.value">{{opt.name}}</label>
</fieldset>
</div>
</form>
JaronRH pro commented 7 years ago
Reactive forms *shouldn't* need a name="" tag but I tried adding it anyway - still having the same issue. Thanks for looking into it though!Dawid Adach pro commented 7 years ago
Unfortunately I cannot reproduce the issue, I suggest starting with the basic example and extend it step by step.JaronRH pro commented 7 years ago
I did manage to track it down... finally. Another style I had contained: label:after{display: none !important;} This was hiding your style. Once I worked around that, the radio buttons worked fine! So yeah, mark this one down under "not your problem!" Thanks again for your help though!FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Dawid Adach pro commented 7 years ago
Dear JaronRH, could you please describe the issue in more details. What do you mean by "get the radio button formatting to work for unselected items but it is missing when I select a radio/label" could you specify which formating do you mean what classes etc?