CODEWITHSUNDEEP
twitter-bootstrapruby-on-rails-4
user938363
user938363

Reputation: 10350

How to set width of form_tag with Bootstrap in Rails 4.2?

The following html: {} sets view width for form_for. However it does not work the same for form_tag and the tag widths are not even and narrow:

<%= form_tag my_url, :method => :get, html: { class: 'form-horizontal col-sm-10'},
    wrapper: :horizontal_form,
    wrapper_mappings: {
    check_boxes: :horizontal_radio_and_checkboxes,
    radio_buttons: :horizontal_radio_and_checkboxes,
    file: :horizontal_file_input,
    boolean: :horizontal_boolean } do  %>
               ...
 <% end %>

There is no html: option for form_tag and we suspect it may not be the right format for setting the width with bootstrap. What's the right option to set width with bootstrap?

Upvotes: 0

Views: 1190

Answers (3)

user938363
user938363

Reputation: 10350

Here is the solution we found:

<%= form_tag my_url, :method => :get, class: 'form-horizontal' do  %>
   #wrap each tag inside 'form-control', add 'control-label' to label and 'form-control' to tag.         ...
   <div class="form-group">
      <div class="control-label col-sm-4"> 
         <%= label_tag 'My Label' %>
      </div>
      <div class="col-sm-6">
          <%= date_field_tag 'My Date', nil, placeholder: Date.today.to_s, class: 'form-control' %>
      </div>
    </div>

<% end %>

Here is how the form look like: enter image description here

Here is link on W3school about Bootstrap form: http://www.w3schools.com/bootstrap/bootstrap_forms.asp

Upvotes: 0

Elvn
Elvn

Reputation: 3057

To your point: the right format for setting the width with bootstrap.

Bootstrap is expecting this type of structure:

     <div class="row"> 
       ...
      <%= form_tag(form_tag my_url, :method => :get, :class => "form-group") do %>
          <div class="input-group">
               Fields here...          
              <span class="input-group-btn">
                <%= button_tag  name: nil, class: "btn btn-default", type: "submit" do %>            
                <% end %>
              </span> <!-- -btn -->
        </div> <!-- "input-group" --> 

    <% end %> <!-- form -->

   </div> <!-- row -->

Horizontal forms

A quick addition about horizontal forms, like those for logging in in a header

<div class="form-inline">
    <div class="row">
    ...
        <div class="input-group input-group-sm">
            <span class="input-group-addon input-group-xs" id="basic-addon1">
                <%= f.button :submit, t('.login'), class: "btn btn-sm btn-default nudge_down_6" %></span>
            <span class="input-group-addon input-group-xs" id="basic-addon1">
                <%= f.input :email,  class: 'form-control input-group-xs nudge_down_6', required: false %></span>
            <span class="input-group-addon input-group-xs" id="basic-addon1">
                <%= f.input :password,  class: 'form-control input-group-xs nudge_down_6', required: false %></span>
        </div>

Let me know if this snippet helps and I can follow up with more, if needed.

Debug note

The web browser console shows all and tells all. You can inspect each rendered HTML element and see which is setting the width that you want to change then override it. But if you use Bootstrap with the structure it specifies for CSS tags, then override tweaking should be minimal.

Upvotes: 1

K M Rakibul Islam
K M Rakibul Islam

Reputation: 34318

html option is avaiable for form_for but NOT for form_tag.

To fix your issue, replace:

<%= form_tag my_url, :method => :get, html: { class: 'form-horizontal col-sm-10'}

with:

<%= form_tag my_url, :method => :get, class: 'form-horizontal col-sm-10'

Upvotes: 1

Related Questions