PlayFramework 2.1：Helper Bootstrap 复选框答案

【问题标题】：PlayFramework 2.1: Helper Bootstrap checkboxPlayFramework 2.1：Helper Bootstrap 复选框
【发布时间】：2013-06-20 00:46:25
【问题描述】：

我正在使用 BootStrap 帮助程序在 PlayFramework 2.1 中开发“注册表单”。我为此覆盖了引导帮助程序：

@(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.hasErrors) { <p class="help-block">@elements.errors.mkString(", ")</p> }  
  </div>  
</div>

我关注了这个tutorial

现在，它正在正确地创建水平形状。但是如果我使用 helper 创建一个复选框，我的复选框和标签没有对齐。看这张图：

第一个复选框是使用助手创建的，第二个是我编写的：

<div class="control-group">
   <div class="controls">
       <label class="checkbox">
            <input type="checkbox"> I accept 
       </label>
    </div>
</div>

我想生成与我编写的相同的 HTML（第二个复选框）。我被帮手吓坏了！如何对齐我的复选框？我总是需要创建自己的助手？

【问题讨论】：

标签： java forms checkbox playframework playframework-2.1

【解决方案1】：

只需在@elements.label 前面放一个空格即可。它只是普通的 HTML。还是在@elements.errors.mkString(", ")前面我不确定。

但我还构建了一个更好的 fieldConstructor，您可以在其中使用前置输入作为图标和字母以及其他功能。你可以使用它，通常它会做你喜欢的一切，甚至更多。

@(elements: helper.FieldElements)

@**************************************************
* Generate input according twitter bootsrap rules *
**************************************************@
<div class="@if(elements.hasErrors) {alert alert-error}">
    <label for="@elements.id"><strong>@elements.label</strong> <small> @MyMessages.get(elements.infos.mkString(""))</small></label>

@if(elements.args.containsKey('_iconcls)){
<div class="input-prepend">

<span class="add-on">
    <i class="@elements.args.get('_iconcls) icon-size"></i>
</span>

    @elements.input

    <span class="help-block error small"><small>@MyMessages.get(elements.errors.mkString("; "))</small></span> 
</div>
}else{
    @if(elements.args.containsKey('_prependedInput)){
<div class="input-prepend">

<span class="add-on">
    @elements.args.get('_prependedInput)
</span>

    @elements.input

    <span class="help-block error small"><small>@elements.errors.mkString("; ")</small></span> 
</div>
    }else{
        @elements.input
        <span class="help-block error small"><small>@elements.errors.mkString("; ")</small></span> 
    }
}

【讨论】：