How to position the submit button on the same line as the input using Simple Form and Bootstrap?

Question

Using Simple Form and Bootstrap, I would like the following to be present on the line, instead of the submit button below the input selection.

<%= 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 appears outside the div for 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 %> 

Answer 1

To solve this problem, I needed to use input_field inside the 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.

Answer 2

try adding the pull-left or pull-right class to your elements. which will add the attributes float: left or float: right to your object.

but if the float will not work for you, create your own class called inline as follows:

.inline { display: inline; }

or (depending on the implementation of your site)

.inline { display: inline-block; }

and add the inline class to your objects.

Answer 3

For those who read this later, I usually just port the input and send to flexbox. After that, you can provide a style of how you want each element to look (for example: specify the width of the form group: 100%

 <%= simple_form_for :select_rollout, :html => {:class => "form-inline"}, do |f| %> <div class="flexbox-class"> <%= f.input :rollout_id, collection: @rollout_options, :label => false %> <%= f.button :submit, "Apply" %> </div> <% end %> .flexbox-class { display: flex; justify-content: space-between; align-items: flex-end; .form-group { width: 100%; } .btn-primary { margin-bottom: 16px } }