Radio buttons in a form do not display correctly after a form validation failure - bootstrap

Rails 4 app with Bootstrap 3

I have a form that includes inputs from switches:

<strong> Radio button options on form </strong><br>
   <div class="form-group">
     &nbsp<%= f.radio_button :category, 'A' %> &nbsp <%= f.label "A", "A" %><br /> 
     &nbsp<%= f.radio_button :category, 'B' %> &nbsp <%= f.label "B", "B" %><br />  
     &nbsp<%= f.radio_button :category, 'C' %> &nbsp <%= f.label "C", "C" %><br />
   </div>

When you first load the form, everything looks right:

enter image description here

My problem is that if the form fails due to a validation error (there is no required input, etc. anywhere on the form), when the page is re-displayed, the switch and label are displayed on two different lines:

enter image description here

How to fix this problem?

Update Generated HTML for each: Original (correct):

    <strong> Radio button options on form </strong><br>
    <div class="form-group">
      &nbsp<input id="listing_category_1" name="listing[category]" type="radio" value="1" /> &nbsp <label for="listing_1">A</label><br /> 
      &nbsp<input id="listing_category_2" name="listing[category]" type="radio" value="2" /> &nbsp <label for="listing_2">B</label><br />  
      &nbsp<input id="listing_category_3" name="listing[category]" type="radio" value="3" /> &nbsp <label for="listing_3">C</label><br />
    </div>

And for re-rendering (wrong):

    <strong> Radio button options on form </strong><br>
    <div class="form-group">
      &nbsp<div class="field_with_errors"><input id="listing_category_1" name="listing[category]" type="radio" value="1" /></div> &nbsp <label for="listing_1">A</label><br /> 
      &nbsp<div class="field_with_errors"><input id="listing_category_2" name="listing[category]" type="radio" value="2" /></div> &nbsp <label for="listing_2">B</label><br />  
      &nbsp<div class="field_with_errors"><input id="listing_category_3" name="listing[category]" type="radio" value="3" /></div> &nbsp <label for="listing_3">C</label><br />
    </div>
+4
source share
1 answer

, Rails div:

<div class="field_with_errors">
  <input name="foo" type="radio" value="1" />
</div>

css, , div inline block:

.field_with_errors { display: inline; }

, Rails, :

config.action_view.field_error_proc = Proc.new { |html_tag, instance| "<span class='field_with_errors'>#{html_tag}</span>".html_safe }
+7

Source: https://habr.com/ru/post/1530311/


All Articles