Zurb Foundation Form - Not Inline

Question

I am trying to get a checkbox next to it's label, and centered vertically against that label, in a Ruby on Rails form. Ideally, those would also both be in line with the Submit button.

I am using Zurb Foundation. Despite combing through the documentation, I can't get it to work. I've tried many incarnations, but here is one:

<div class="row collapse">
    <div class="large-4 columns"> &nbsp </div>
    <div class="large-4 columns">
            <%= f.check_box :remember_me %>
            <%= f.label :remember_me, 'Remember me' %>
        <div>
            <%= f.submit "Sign in", class: "button" %>
        </div>
    </div>
    <div class="large-4 columns"> &nbsp </div>
</div>

Generated HTML:

<div class="row collapse">
    <div class="large-4 columns">
        <input name="user[remember_me]" value="0" type="hidden"><input id="user_remember_me" name="user[remember_me]" value="1" type="checkbox">
        <label for="user_remember_me">Remember me</label>
        <div>
            <input class="button" name="commit" value="Sign in" type="submit">
        </div>
    </div>
</div>

Generated HTML also shows the load order for css files here:

<link href="/assets/application.css?body=1" media="all" rel="stylesheet">
<link href="/assets/foundation_and_overrides.css?body=1" media="all" rel="stylesheet">    
<link href="/assets/custom.css?body=1" media="all" rel="stylesheet">

3 hours spent so far trying to put a checkbox next to its label. Makes me appreciate Excel a bit more. Thanks for your help in advance.

UPDATE:

The following code has put everything on one line, but is not vertically aligning the button and the label. Removing .inline has no effect,

<div class="row collapse">
    <%= f.check_box :remember_me, class: 'left inline' %>
    <%= f.label :remember_me, 'Remember me', class: 'left inline' %>
    <%= f.submit "Sign in", class: "button right" %>
</div>

Answer 1

Not totally sure of the generated HTML, but I took a guess at it and put it into this CodePen which also references the Foundation framework.

UPDATED pen to include Foundation 4 instead.

http://codepen.io/keithwyland/pen/Cmukx

You want to remove the <div> elements from around the label and checkbox. And get class="left inline" on the checkbox <input>.

<div class="row collapse">
    <div class="large-4 columns">
          <input name="user[remember_me]" value="0" type="hidden"><input id="user_remember_me" name="user[remember_me]" value="1" type="checkbox" class="left inline">
          <label for="user_remember_me" >Remember me</label>
        <div>
            <input class="button" name="commit" value="Sign in" type="submit">
        </div>
    </div>
</div>

So for the ruby code, I'm thinking this (but I'm not great with ruby/rails code):

<div class="row collapse">
    <div class="large-4 columns"> &nbsp </div>
    <div class="large-4 columns">
            <%= f.check_box :remember_me %>
            <%= f.label :remember_me, 'Remember me', class: "left inline" %>
        <div>
            <%= f.submit "Sign in", class: "button" %>
        </div>
    </div>
    <div class="large-4 columns"> &nbsp </div>
</div>

Answer 2

you can fix the issue by adding inline to both checkbox and label and adding this to your css

input.inline, label.inline {
  vertical-align:middle;
  margin-bottom:0px;
}

should solve the problem as zurb doesnt seem to account for your use case. Just keep in mind that all inline elements that have vertical align:middle will match align to each others height - it doesnt work for block level elements.

Answer 3

I know it was posted 6 months ago, but I'd still like to contribute my 2c. In those cases I play with grid, so for each label-input pair I add two columns.

In first column I put a label class right, and in second one I put the input. Or, in your case, the other way around. Then pick your column ratio from 1-11 to 11-1 (depending where you want to place it) and there you go.

<div class="row collapse">
<div class="large-4 large-centered columns">
    <div class="large-2 columns">
        <%= f.check_box :remember_me, class: "right" %>
    </div>
    <div class="large-8 columns">
        <%= f.label :remember_me, 'Remember me' %>
    </div>        
    <div class="large-2 columns">
        <%= f.submit "Sign in", class: "button" %>
    </div>
</div>

Also, notice how I removed 2 divs containing &nbsp characters for centering the middle div, just use "large-centered" class on your content div:

<div class="large-4 large-centered columns">...</div>

Answer 4

I had a similar problem recently. I tried translating my solution to fit your issue.

<div class="row collapse" >
  <div>
    <%= f.check_box :remember_me %>
    <%= f.label :remember_me, "Remember moi", class: "inline-right" %>
  </div>
  <div class="large-2 columns inline-right">
    <%= f.submit "Sign in", class: "button" %>
  </div>
</div>

Might need to include an offset (e.g., "small-offset-1") in there somewhere. Either on the button or the button's div.