CODEWITHSUNDEEP
cssruby-on-railstwitter-bootstrap
jason_kang
jason_kang

Reputation: 29

Rails & Bootstrap Make button inline with text field

I'm working on a front end of web app. I would like to know how to make the button and textfield in line. Another question is how to make the error message displayed just below the textfield? Picture: https://www.dropbox.com/s/vsdy3730flraes3/Screen%20Shot%202013-12-01%20at%204.47.20%20PM.png

Here is the code:

    <div class="input-group" align="center" >

    <%= form_tag(location_search_path,method: "get" ) do %>
        <%= text_field_tag('location', params[:location], :size => 150, :placeholder=> "Enter city or zip code") %> 
        <%= button_tag(type: "submit", class: "btn  btn-success ") do %>
         Search 
                 <i class="icon-search"></i>
        <% end %>
    <% end %>
</div>
    <% [:notice, :error, :alert].each do |level| %>
      <% unless flash[level].blank? %>
              <div data-alert="alert" class="alert-message <%= flash_class(level) %> fade in" align="center">
          <%= content_tag :p, flash[level] %>
      </div>
     <% end %>
    <% end %>

Upvotes: 1

Views: 4181

Answers (2)

Dudo
Dudo

Reputation: 4169

bootstrap 3 has input groups... which are nice. http://getbootstrap.com/components/#input-groups

Try this in your code...

<%= form_tag location_search_path, method: 'get' do %>
  <%= text_field_tag :location, params[:location], size: 150, placeholder: "Enter city or zip code" %>
  <span class='input-group-btn'>
    <%= submit_tag 'Search', class: 'btn btn-success' %>
  </span>
<% end %>

Upvotes: 0

Beartech
Beartech

Reputation: 6411

Add the <div class="form-inline"> to your form element to get the button and field onto the same line, and I guess you could us a <p> to make the message appear below it, though I would probably set up the input group in a row with columns to center it rather than the align tag you are using, and then put the messages into a new <row> below it in the same column.

<div class="input-group" align="center" >
    <div class="form-inline">
      <%= form_tag(location_search_path,method: "get" ) do %>
      <%= text_field_tag('location', params[:location], :size => 150, :placeholder=> "Enter city or zip code") %> 
      <%= button_tag(type: "submit", class: "btn  btn-success ") do %>
       Search 
             <i class="icon-search"></i>
      <% end %>
    <% end %>
    </div>
</div>
<p>
    <% [:notice, :error, :alert].each do |level| %>
        <% unless flash[level].blank? %>
        <div data-alert="alert" class="alert-message <%= flash_class(level) %> fade in" align="center">
        <%= content_tag :p, flash[level] %>
        </div>
     <% end %>
<% end %>

Upvotes: 2

Related Questions