How do I force a search box to be on the same line as navigation buttons (will_paginate)?

Question

how do I get will_paginate to line up with a search box on a rails project mostly taken from michael hartl's rails tutorial. what I have in rails is:

<div class="row">
    <div class= "pull-left">
        <%= will_paginate  %>
    </div>
  <div class="span4 offset4 pull-right">
        <%= form_tag users_path, :method => 'get', class: "navbar-search" do %>
        <%= text_field_tag :search, params[:search], class: "search-query span3" %>
        <%= submit_tag "Search", :name => nil, class: "btn btn-primary" %>
        <% end %>
    </div>
</div>

which results in this html (see here for the html in a jsfiddle ):

<div class="row">
<div class="pull-left">
<div class="pagination">
<ul>
<li class="prev previous_page disabled">
<a href="#">← Previous</a>
</li>
<li class="active">
<a href="/users?page=1&search=&utf8=%E2%9C%93" rel="start">1</a>
</li>
<li>
<a href="/users?page=2&search=&utf8=%E2%9C%93" rel="next">2</a>
</li>
<li>
<a href="/users?page=3&search=&utf8=%E2%9C%93">3</a>
</li>
<li>
<a href="/users?page=4&search=&utf8=%E2%9C%93">4</a>
</li>
<li class="next next_page ">
<a href="/users?page=2&search=&utf8=%E2%9C%93" rel="next">Next →</a>
</li>
</ul>
</div>
</div>
<div class="span4 offset4 pull-right">
<form class="navbar-search" method="get" action="/users" accept-charset="UTF-8">
<div style="margin:0;padding:0;display:inline">
<input type="hidden" value="✓" name="utf8">
</div>
<input id="search" class="search-query span3" type="text" value="" name="search">
<input class="btn btn-primary" type="submit" value="Search">
</form>
</div>
</div>

now as you can see: The search box is above the will_paginate links, how do I make them be inline with one another?
(ps in addition in the jsfiddle the search button is not inline with the search bar, bonus points if you can tell me why that is, that doesn't happen on my site and I copied the html across)

Answer 1

Why not try adding some margin to the top?

Try this on your search's div: margin-top: 10px; .

Answer 2

The reason you're seeing all these things happening is due to Twitter Bootstrap's CSS styles that you're importing. The same reason also explains the button breaking to the line after the search input - it's due to the set width of the .span4 class. Here are the styles that at least visually fixed it for me:

.top-nav .span4{
    width:auto;
}
.top-nav .span4 .navbar-search{
    margin:20px 0;
}

Here's a JSFiddle to demonstrate what this achieves (note I added an extra class of .top-nav to the wrapper element, to more specifically target elements with CSS selectors).

Anyways, good luck! It can be a bit tricky working with a CSS framework to start with, since there are so many pre-written styles to take into account.

Answer 3

In the view file,

<div class= "pull-left">
        <%= will_paginate  %>
</div>

This div is taking 100% width I guess. So please try adding a new class to it, where you can define its width, so that the your search section comes in a line.