Overriding Play 2.1 Checkbox Form Helper for Twitter Bootstrap

Question

I want to show an HTML checkbox followed by the label to the right.

I followed Pere Villega's suggestion, and modified the Play 2.1-SNAPSHOT version of views.helper.checkbox.scala asviews.helper.twitterCheckbox.scala. My project uses the version of Twitter Bootstrap provided by Webjars:

@**
 * Generate an HTML input checkbox for Twitter Bootstrap.
 *
 * Example:
 * {{{
 * @checkbox(field = myForm("done"))
 * }}}
 *
 * @param field The form field.
 * @param args Set of extra HTML attributes ('''id''' and '''label''' are 2 special arguments).
 * @param handler The field constructor.
 *@
@(field: play.api.data.Field, args: (Symbol,Any)*)(implicit handler: FieldConstructor, lang: play.api.i18n.Lang)

@boxValue = @{ args.toMap.get('value).getOrElse("true") }

@input(field, args:_*) { (id, name, value, htmlArgs) =>
  <label class="checkbox">
    <input type="checkbox" name="@name" value="@boxValue" @(
      if(value == Some(boxValue)) "checked" else "") @toHtmlArgs(htmlArgs.filterKeys(_ == 'value)) />
    @args.toMap.get('_text)
  </label>
}

I used the form helper like this:

@import helper._
@form(action = courseName.map(routes.CoursesController.update(_)).getOrElse(routes.CoursesController.save()),
               args = 'class -> "form-horizontal") {
  <div class="span3">
    <p><b>@{if (allCourses.size>0) "" else "No "}Prerequisite Courses</b></p>
    <div class="control-group">
      <div class="controls">
        @allCourses.map { course =>
          @twitterCheckbox(field = editCourseForm(course.name))
        }
      </div>
    </div>
  </div>
}

But I get output like this, which causes the checkbox to be on a different line then the label. The output has been formatted for readability - note the dl and dd tags:

<form action="/courses/admin" method="POST" class="form-horizontal">
<div class="span3">
  <p><b>Prerequisite Courses</b></p>
  <div class="control-group">
    <div class="controls">
      <dl class=" " id="skus_field">
        <dt><label for="skus">skus</label></dt>
        <dd>
          <label class="checkbox">
            <input type="checkbox" name="skus" value="true"   />
          </label>
        </dd>
       </dl>
    </div>
  </div>
</div>
</form>

Seems like there is some sort of implicit behavior I am unaware of. How can I generate something like the following instead, or at least some output that will give the desired result?

<form action="/courses/admin" method="POST" class="form-horizontal">
<div class="span3">
  <p><b>Prerequisite Courses</b></p>
  <div class="control-group">
    <div class="controls">
      <label class="checkbox">
        <input name="skues" type="checkbox" value="true"> sku1
      </label>
    </div>
  </div>
</div>
</form>

Answer 1

I had a similar problem: the checkbox were not well formatted for TwitterBootstrap CSS.

So I had to define my own checkbox helper (in order to add the <label> tag):

File path:

app\views\helper\checkbox2.scala.html

Content:

@(field: play.api.data.Field, args: (Symbol,Any)*)(implicit handler: FieldConstructor, lang: play.api.i18n.Lang)

<label class="checkbox">
    @checkbox(field, args:_*)
</label>

Then, I have redefined my fields constructor template to match Twitter Bootstrap:

File path:

app\views\helper\bootstrapInput.scala.html

Content:

@(elements: helper.FieldElements)

<div class="control-group @if(elements.hasErrors) {error}">
    <label class="control-label" for="@elements.id">@elements.label</label>
    <div class="controls">
        @elements.input
        @if(!elements.errors.isEmpty) {
            <span class="help-inline alert alert-error">@elements.errors(elements.lang).mkString(", ")</span>
        }
        <span class="help-block">@elements.infos(elements.lang).mkString(", ")</span>
    </div>
</div>

Then I have created a field constructor with an impicit call to the template above:

File path:

app\controllers\helpers\BootstrapHelper.scala

Content:

package controllers.helpers

import views.html.helper.FieldConstructor

object BootstrapHelper {
  implicit val myFields = FieldConstructor(views.html.helper.bootstrapInput.f)
}

And finally, I just import it in my "normal" views:

@import helper._
@import helpers.BootstrapHelper._

This is exactly was is written in the doc (http://www.playframework.com/documentation/2.1.0/ScalaFormHelpers) and it works out finely.

At the end, all my inputs were correctly displayed with the Twitter Bootstrap and the checkbox as well.

Hope this helps

EDIT as asked by Mike Slinn, I just added files path and a few details about the implicit call of the field constructor. However, the file names do not really matter here and variants are possible to make the implicit call (see the doc).