Radio Buttons not showing up

Topic: Radio Buttons not showing up

JaronRH pro asked 6 years ago

For some reason, I can get the radio button formatting to work for unselected items but it is missing when I select a radio/label (i.e. nothing there at all). When I compare the DOM between your example and mine, I see that I'm missing the :after for the label element that shows the blue dot. Any idea as to what I'm missing CSS wise? (Angular Pro 5.0.5 downloaded 11/28/2017, Angular 5 CLI)

<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>

Dawid Adach pro commented 6 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?

Add comment

Dawid Adach pro answered 6 years ago

0 0 Best answer

Dear, I have simplified your example to following and it works like a charm, could you please note that you were missing name tag:

<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 6 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 6 years ago

Unfortunately I cannot reproduce the issue, I suggest starting with the basic example and extend it step by step.

JaronRH pro commented 6 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!

Add comment

JaronRH pro answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

Here is a screenshot of what I'm seeing:

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 6 years ago

Thanks for clarification, could you also attach the source code of your form?

JaronRH pro commented 6 years ago

Did you need something more then what is in the original post? (sorry, I can't make everything public!)

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

JaronRH

Pro User 10Support score
1Questions 2Answers 0Snippets