Rails, label with nested HTML using FormBuilder and Devise, with Bootstrap markup

Question

I am working on the front-end part of a Rails 3.1 application. We are using a Twitter Bootstrap as CSS Framework, Devise as the authentication manager and the I18n gem for localization.

This is the devise syntax for a checkbox with its label

<%= f.label :remember_me %>
<%= f.check_box :remember_me %>

And this of course is the generated HTML

<label for="user_remember_me">Ricordati di me</label>
<input name="user[remember_me]" type="hidden" value="0">
<input id="user_remember_me" name="user[remember_me]" type="checkbox" value="1">

Since Bootstrap adds this rule for the labels display: block, the label and the checkbox are not in the same line. To have the on the same line I need an HTML output like this

<label for="user_remember_me">
    Ricordati di me
    <input name="user[remember_me]" type="hidden" value="0">
    <input id="user_remember_me" name="user[remember_me]" type="checkbox" value="1">
</label>

As shown in the forms markup documentation

You will have noticed that the label text is in Italian, the team member who provided localization for Devised worked hard to find out how to do so, and I do not want to force he to work on it again introducing new localized strings.

I am aware of the nice fact that the FormBuidler label method accepts a block as an argument so I could do

<% f.label :remeber_me do %>
    <%= f.check_box :remember_me %>
<% end %>

But this produce an HTML output whitout the label! o.O To be specific this is what I get:

<input name="user[remember_me]" type="hidden" value="0">
<input id="user_remember_me" name="user[remember_me]" type="checkbox" value="1">

I tried to look in the source code, the f.label method calls the label method, but I can only see that if there is a block no text will be printed and that the label and block will be rendered by the label_tag of the template_object.

Before diving into a source code digging, and a no sleep night, I decided to wait a moment and ask the lifesafer community of StackOverflow for help.

Am I missing something? I am calling f.label with block in the wrong way? Is some parameter missing?

Thanks!!

I had the same problem with bootstrap. I ended up just making a css rule to override bootstrap: label { display: inline-block; } maybe not the most elegant solution, but it worked. — kclair
– kclair, Commented Mar 12, 2012 at 23:36
Take a look at this question: stackoverflow.com/questions/2457167/… Maybe can be useful ;) — Matwolf
– Matwolf, Commented Mar 13, 2012 at 1:09
@Mattyx yes thanks, I already knew that question. But it's old and says that rails form does not support blocks, which is false in Rails 3.1. Plus I hoped to be able to do it with vanilla Rails syntax — mokagio
– mokagio, Commented Mar 13, 2012 at 6:48
@kclair :) I thought that too, but I hoped not to have to tweak it — mokagio
– mokagio, Commented Mar 13, 2012 at 6:50

Josh · Accepted Answer · 2012-10-19 16:55:20Z

5

I don't know if you ever got this working...

Running on Rails 3.2.6 this is what I had to do:

<%= f.label :remember_me do %>
  <%= f.check_box :remember_me %>
  Remember Me?
<% end %>

I hope that helps you since I came here looking for an answer to the exact same problem and couldn't find it, except through trial and error.

answered Oct 19, 2012 at 16:55

Josh

3383 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

baptme · Accepted Answer · 2012-06-15 15:49:39Z

0

If you want the label and checkbox on the same line, you must include .form-inline in your

<form class="form-inline">
  <label for="user_remember_me">Ricordati di me</label>
  <input name="user[remember_me]" type="hidden" value="0">
  <input id="user_remember_me" name="user[remember_me]" type="checkbox" value="1">
</form>

http://jsfiddle.net/baptme/66TJY/

<%= form_tag( :class => "form-inline") %>

answered Jun 15, 2012 at 15:49

baptme

10.1k3 gold badges54 silver badges57 bronze badges

Collectives™ on Stack Overflow

Rails, label with nested HTML using FormBuilder and Devise, with Bootstrap markup

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related