CODEWITHSUNDEEP
csszurb-foundation
Devin Crossman
Devin Crossman

Reputation: 7592

align button to text input in foundation css

How do I get a button to line up with the text input using foundation css framework? I tried using the class "inline" which vertically aligns a label with a text input but it didn't work with the button. By default it seems the button's top edge is inline with the text input's top edge.

<form>
    <div class="row">
        <div class="three columns">
            <input type="text" />
        </div>
        <div class="two columns end">
        <button type="button" class="button inline">Do Something</button>
    </div>
    </div>
</form>

Upvotes: 4

Views: 6047

Answers (4)

Noel
Noel

Reputation: 996

Well the Foundation way of doing that is simply to put the field and the button in the same row

   <div class="row">

and assign each field/button column as shown below

<div class="row">
  <%= form_tag search_path, method: 'get' do %>
    <div class="small-9 columns"> 
      <%= text_field_tag :query, params[:query], type: "search", class: "search-field" %>
    </div>
    <div class="small-3 columns"> 
      <%= submit_tag "Search", name: nil, class: "search-form tiny button" %>
    </div>
  <% end %>
</div>

Well, something like that. Replace the logic with your forms.

Upvotes: 1

Mangopop
Mangopop

Reputation: 330

I'm not sure if this is the same problem, but this may help. I was stuck getting buttons in line with the text input fields with foundation 4 and found that the input[type="text"] width is set to 100% and set to display:block, so the input buttons don't have space to fit inline.

using the css hook

input[type="text"].yourClassName

If you override these properties 

display:line;
width:80%;

then the button will be able to slot in on the right.

Hope that helps.

Upvotes: 0

Devin Crossman
Devin Crossman

Reputation: 7592

add margin-top:-3px to the button

Upvotes: 3

lukeocom
lukeocom

Reputation: 3243

have you tried setting your divs to inline-block with vertical align?

div{display:inline-block;vertical-align:middle;}

jsFiddle example http://jsfiddle.net/v4ALL/1

Upvotes: 0

Related Questions