Topic: Radio Buttons in a form overlap

itay pro asked 5 years ago


The example Here is missing integrating radio buttons with in a form group. The form is not rendering well. labels overlap, etc. I sent to Damian demo by email This is my code:
<div class="md-form">
<divclass="form-check">
<labelclass="form-check-label"for="radio1">Option 1</label>
<inputtype="radio"formControlName="sReason"class="form-check-input"id="radio1"name="sReason">
</div>
<divclass="form-check">
<labelclass="form-check-label"for="radio2">Option 2</label>
<inputtype="radio"formControlName="sReason"class="form-check-input"id="radio2"name="sReason">
</div>
</div>
What am I missing ?

itay pro answered 5 years ago


I added different values yet once selecting one, all are selected I gave up and found a different solution rather than radio buttons

Arkadiusz Idzikowski staff commented 5 years ago

If you would need to use radio buttons after all, please send an example code to a.idzikowski@mdbootstrap.com (ts and html with value attributes added) so I can check where is the problem.

itay pro answered 5 years ago


This is my code now yet I cannot select between the options:
<div class="md-form">
<div class="form-check">
<input type="radio" formControlName="sReason" class="form-check-input" id="radio1" name="sReason">
<label class="form-check-label" for="radio1">Option 1</label>
</div>
<div class="form-check">
<input type="radio" formControlName="sReason" class="form-check-input" id="radio2" name="sReason">
<label class="form-check-label" for="radio2">Option 2</label>
</div>
</div>

Arkadiusz Idzikowski staff commented 5 years ago

Please try to add different value attributes to radio inputs.

Arkadiusz Idzikowski staff answered 5 years ago


Dear mdb2, Please move label after the input element like in examples from our documentation. Regards, Arek

Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.2.2
  • Device: NA
  • Browser: NA
  • OS: NA
  • Provided sample code: No
  • Provided link: Yes