I am attempting to enhance my form by adding checkboxes, but I have encountered an issue with the bootstrap class "checkbox-inline" not working as expected.
Below is the code snippet:
<strong>Styles:</strong>
<%= f.collection_check_boxes :style_ids, Style.all, :id, :name do |cb| %>
<% cb.label(class: "checkbox-inline input_checkbox") {cb.check_box(class: "checkbox") + cb.text} %>
<% end %>
<br><br>
<strong>Ingredients:</strong>
<%= f.collection_check_boxes :ingredient_ids, Ingredient.all, :id, :name do |cbi| %>
<% cbi.label(class: "checkbox-inline input_checkbox") {cbi.check_box(class: "checkbox") + cbi.text} %>
<% end %>
The result appears below:
Please assist if possible, as I have been struggling to resolve this issue.
Edit: Upon reviewing the bootstrap documentation, it seems that checkbox-inline and radio-inline are no longer supported. I need to find a way to position the checkboxes next to their respective labels.
Edit 2: A solution has been found! It turns out that removing the following CSS caused my forms to break, but correctly positioned the checkboxes:
input {
width: 100%;
}
Instead, I applied the following adjustment in the CSS:
.input_checkbox input {
width: auto !important;
}
--resulting in everything being resolved successfully.