CODEWITHSUNDEEP
htmlcssruby-on-railstwitter-bootstrap
Peter
Peter

Reputation: 52

Rails 4, Bootstrap 3, form-inline input-group button in same row

still pretty new to all this, so thanks for any help here. I have read all the threads I could find but I think I understood the theory, just cant find the mistake in my individual setting:

I want to have a comment input field together with a post button in the same line. My div is the following:

        <div class="input-group"> 
         <div class="form-inline">
            <%= form_for(@comment, html: { multipart: true }) do |f| %>
             <%= f.text_field :content, placeholder: "Neuen Kommentar abgeben...", class:"form-control" %>
                 <span class='input-group-btn'>
                    <%= f.submit "Posten", class: "btn btn-primary" %>
                </span>
                 <%= hidden_field_tag :parent_id, micropost.id %>
                 <%= hidden_field_tag :car_id, micropost.car_id %>
            <% end %>
            </div>
        </div>

I have tried several other solutions that I have found, but it never puts them in the same row. I have already looked at my CSS and the divs on higher levels, but I cant seem to find it. Can anyone point me in the right direction here?

Best regards, Peter

Upvotes: 1

Views: 2088

Answers (2)

Elvn
Elvn

Reputation: 3057

One way to accomplish inlining of form fields with the label is to use the bootstrap add-on feature

This is what the add-on inline form field looks like.

enter image description here

 <div class="form-inline">
    <div class="row">
            <%= simple_form_for(@comment, html: { multipart: true }) do |f| %>
            <div class="input-group input-group-sm">
                <span class="input-group-addon input-group-xs" id="basic-addon1">
                <%= f.button :submit, "Posten", class: "btn btn-sm btn-default" %></span>
                <span class="input-group-addon input-group-xs" id="basic-addon1">
                    <%= f.text_field :content, placeholder: "Neuen Kommentar abgeben...", class: "btn btn-sm btn-default" %></span>

                <span class="input-group-addon input-group-xs" id="basic-addon1">
                    <%= f.input :other_inline_field,  class: 'form-control input-group-xs nudge_down_6', required: false %></span>
            </div>

            <div class="input-group input-group-xs" style="display:block;">
                <small><%= link_to "inline link", somelink_here_path %> | </small>
                <small><%= link_to "inline link2"), other_link_path %> | </small>   
            </div>

        <% end %>

    </div>
</div>

Upvotes: 1

Georg Keferb&#246;ck
Georg Keferb&#246;ck

Reputation: 1977

I recommend you keep things super simple when it comes to forms - trust me, when you are woking on multiple forms on a site and they may become more complex you don't want to be stuck with a lot of code. So keep it simple and consistent and plan well ahead how you structure them.

To answer your question - you can use Rails Bootstrap form gem (that shall do for your purposes). It is easy to use and generates the HTML without having to code with overhead.

To answer specifically your question.

  • keep the form_for on the outside.

  • Here an example that may work for you (but again I would rather refer to the gem)

    = form_for @magazine, :html => { :multipart => true } do |f|
  .page-header
    %h3 #{t('magazines.index.header-1')}
  %p #{t('magazines.index.content-1')}
  .col-md-6.col-sm-12.col-xs-12
    %div.input-group
      %span.input-group-addon #{t('magazines.index.title')}
      = f.text_field :title, required: true, :class => "form-control"
 .col-md-6.col-sm-12.col-xs-12
    %div.input-group
      %span.input-group-addon #{t('magazines.index.summary')}
      = f.text_area :summary, :required => true, :rows => '4', :class => "form-control"

This is a simple haml snippet of one of our previous projects where we bothered to manually generate the form (as it was only for a single form). Hope this helps!

Replace the ".col-md-6.col-sm-12.col-xs-12" with the space you need. This is essentially how you place the fields next to each other.

Upvotes: 1

Related Questions