Label is getting displayed below checkbox

Question

<%= f.check_box :openid_enabled %>
<%= f.label :openid_enabled, 'OpenID' %>

Above code generate this HTML

<input type="hidden" value="0" name="application[openid_enabled]">
<input type="checkbox" value="1" name="application[openid_enabled]" id="application_openid_enabled">
<label for="application_openid_enabled">OpenID</label>

and the label is getting displayed like

[x]
OpenID

instead of

[x] OpenID

Do I need to style it or rails helpers have some build in functionality?

Added

I am using twitter bootstrap CSS framework in my Rails application.

Posse

Please include the relevant CSS. The code you provided works as you want: jsfiddle.net/A2Y5d – Alyose

@MyHeadHurts thanks. I styled the label with with display:inline as suggested by Dipaks in below answer and it worked. – Posse

Answer 1

I used following to fix the issue without overriding style of twitter bootstrap css.

<%= f.label :openid_enabled, class: 'checkbox' do %>
  <%= f.check_box :openid_enabled %>
  OpenID
<% end %>

Which generates following HTML

<label for="application_openid_enabled" class="checkbox">
  <input type="hidden" value="0" name="application[openid_enabled]">
  <input type="checkbox" value="1" name="application[openid_enabled]" id="application_openid_enabled">
  OpenID
</label>

Here is reference http://twitter.github.com/bootstrap/base-css.html

Thanks @MyHeadHurts and @Dipaks for your invaluable inputs.

Posse

+1 - since you are using Twitter Bootstrap this is the right way to do it – Alyose

Answer 2

This must be happening because either input or label is set as display: block; You can show it in one line by making these elements inline -

input, label{ display: inline; }

Thymic

Answer 3

I know its old but the best way to do it today would be to use the checkbox-inline class on the label.

Spermatogonium