Make all input fields on the same line

Question

Im trying to use css to make all the fields for my form display on one line. It's part of the header nav on my page so it is important that it shows on one line instead of multiple lines.

Here's my header code at the moment.

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
      <div class="container">
      <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
        <span class="i-bar"></span>
        <span class="i-bar"></span>
        <span class="i-bar"></span>
      </a>
      <a class="brand" href="/">Bandini</a>
      <div class="container nav-collapse">
        <ul class="nav">
            <li><%= link_to "Clients", "/clients"  %></li>
            <li><%= link_to "Jobs", "/jobs"  %></li>
        </ul>
        <ul class="user_nav">
                <%= render :partial => "sessions/manager" %>
            </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

The <%= render :partial => "sessions/manager" %> part points to a partial which displayes another partial depending on the users login state.

If they are logged out, then it displays the login form and if they are logged in then it shows th currrent users email adress and a signout link.

Here's my login form.

<%= simple_form_for("user", :url => user_session_path, :html => {:id => "sign_in", :class => 'form-inline' }, :remote => true, :format => :json) do |f| %>
    <%= f.input :email, :placeholder => 'Email' %>
    <%= f.input :password, :placeholder => 'Password' %>
    <%= f.submit 'Login' %>
    <%= link_to "Forgot your password?", new_password_path('user') %>
  <% end %>

The form utilizes ajax and the simple_form gem for all the markup.

Ive tried playing around in Googles element tools and adding display: inline; to all of my input fields but no such luck.

Can anyone assist or point me in the right direction?

Edit: HTML generated..

            <ul class="user_nav">
                  <form accept-charset="UTF-8" action="/users/sign_in" class="simple_form form-inline" data-remote="true" id="sign_in" method="post" novalidate="novalidate"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="fN0oKIlpnhS0WLZpKQafln+182IT1ONVuDP0eRtT8fg=" /></div>
    <div class="control-group email required"><label class="email required control-label" for="user_email"><abbr title="required">*</abbr> Email</label><div class="controls"><input class="string email required" id="user_email" name="user[email]" placeholder="Email" size="50" type="email" /></div></div>
    <div class="control-group password required"><label class="password required control-label" for="user_password"><abbr title="required">*</abbr> Password</label><div class="controls"><input class="password required" id="user_password" name="user[password]" placeholder="Password" size="50" type="password" /></div></div>
    <input name="commit" type="submit" value="Login" />
    <a href="/users/password/new">Forgot your password?</a>
  </form>

            </ul>

Be more useful if you posted the actual HTML the Ruby outputs (and, really, any CSS applied). — reisio
HTML form inputs tend to stay in a single line by default so it's probably a matter of removing a CSS property or two. It's also possible that your Ruby code includes line breaks. As @reisio said, post your output HTML and CSS, preferably on jsfiddle.net so we can play with it. — toniedzwiedz

jstrong jstrong · Accepted Answer · 2012-05-27T19:14:35

The reason display: inline; on your inputs is not working is because simple_form by default wraps a div tag around every input. There are two ways to fix this problem:

Create a custom wrapper for simple_form

https://github.com/plataformatec/simple_form#the-wrappers-api

Set both your inputs and the surrounding div to be inline-block:

.user_nav div, .user_nav input, .user_nav input[type="submit"] {

  display: inline-block;

}

While the .user_nav input css style theoretically should not be necessary, it helps to specify it just in case there is some other CSS rule somewhere setting inputs to block. If you're sure that inputs are behaving normally, then you should be able to remove the second part of the CSS definition above.

Make all input fields on the same line

2 Answers