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.

Please include the relevant CSS. The code you provided works as you want: http://jsfiddle.net/A2Y5d/ — My Head Hurts, Aug 20 '12 at 11:07
@MyHeadHurts thanks. I styled the label with with display:inline as suggested by Dipaks in below answer and it worked. — Amit Patel, Aug 20 '12 at 11:20

score 5 · Answer 1 · answered Aug 20 '12 at 11:08

5

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; }

answered Aug 20 '12 at 11:08

Dipak

11,930
1
30
31

score 5 · Accepted Answer · answered Aug 20 '12 at 11:41

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.

+1 - since you are using Twitter Bootstrap this is the right way to do it — My Head Hurts, Aug 20 '12 at 11:54

score 1 · Answer 3 · answered Oct 04 '17 at 16:44

1

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

answered Oct 04 '17 at 16:44

gbjbaanb

51,617
12
104
148

Label is getting displayed below checkbox

3 Answers3

Linked