Menu
Using Simple Form and Bootstrap, I would like to have the following appear in-line instead of having the submit button below the input select.
<%= simple_form_for :select_rollout, :html => {:class => "form-inline"}, do |f| %>
<%= f.input :rollout_id, collection: @rollout_options, :label => false %>
<%= f.button :submit, "Apply" %>
<% end %>
The following solution only works for inputs (the submit button is rendered outside the div for the inputs):
<%= form.input :city, label: 'City/State/Zip', input_html: {class: 'span3'}, wrapper_html: {class: 'controls controls-row'} do %>
<%= form.input_field :city, class: 'span1' %>
<%= form.input_field :state, class: 'span1' %>
<% end %>
920
Yes, structurally the submit button needs to be inside a form element for the document to be valid X/HTML.
Simply, wrap the button and input inside form-group div and voila! Show activity on this post. Button is an inline element. So what you can do is make it a block element.
You can tie a submit button to a form that the button doesn't live inside of. The trick is to give the form an id and then reference that id with the button's form property. With this setup, clicking the Submit button will cause the form to be submitted.
To solve this, I needed to use input_field inside an input block, and use the inline-form style on the wrapper for the block:
<%= f.input :rollout_id, :label => false, wrapper_html: {class: "form-inline"} do %>
<%= f.input_field :rollout_id, collection: @rollout_options, :label => false %>
<%= f.button :submit, "Apply", :class => "btn-primary" %>
<% end %>
Hope this helps someone.
130
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With