Radio Buttons in a form overlap

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Radio Buttons in a form overlap

mdb2 pro asked 6 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 ?

Arkadiusz Idzikowski staff answered 6 years ago

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

mdb2 pro answered 6 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 6 years ago

Please try to add different value attributes to radio inputs.

mdb2 pro answered 6 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 6 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.
Write
Create snippet
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
  • User: 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
Tags
radio-buttons-and-checkboxes
Related topics
0
Can I create checkbox & radiobuttons without labels?
0
Checkboxes, radios and switches with long labels are rendered incorrectly
0
Radio button inline validation
0
Radio Toggle Buttons Spacing
0
Radio button not inline
About author
itay
Pro User
2474Support score
150Questions 196Answers
0Snippets likes 0Snippets