枠組み

Question

私は私のテンプレートでinputCheckboxGroupを持っている：

<div class="form-group"> 
    @inputCheckboxGroup(
     eventForm("tags"), 
     options = Seq("CP" -> "CP", "SB" -> "SB", "CM" -> "CM"), 
     '_label -> "Where should this event be viewable?") 
</div> 

は残念ながら、コードプレイは、ディスプレイに（1行で）水平にチェックボックスをレンダリングします。コードは、どちらかの非常にきれいではないと私はラベルやチェックボックスが縦に表示されるように、これをラップする方法を見つけ出すことはできません。

<div class="form-group"> 
    <dl class=" " id="tags_field"> 
     <dt>Where should this event be viewable?</dt> 
     <dd> 
      <span class="buttonset" id="tags"> 
      <div class="checker" id="uniform-tags_CP"><span class=""><input type="checkbox" id="tags_CP" name="tags[]" value="CP"></span></div> 
      <label for="tags_CP">CP page (Portal)</label> 
      <div class="checker" id="uniform-tags_SB"><span class=""><input type="checkbox" id="tags_SB" name="tags[]" value="SB"></span></div> 
      <label for="tags_SB">SB Page</label> 
      <div class="checker" id="uniform-tags_CM"><span class=""><input type="checkbox" id="tags_CM" name="tags[]" value="CM"></span></div> 
      <label for="tags_CM">CM Page</label> 
     </span> 
     </dd> 
    </dl> 
</div> 

どのように私は、チェックボックスを垂直にするために、これを修正することができますか？私はいくつかの変更を行うためにjQueryを使用していますので、JSの回答は私によってうまくいきます。

Answer 1

同じ問題が発生し、縦型チェックボックスの新しいテンプレートを作成する必要がありました。以下のテンプレートコード：ここinputCheckboxGroupとは異なり

@import views.html.helper.input 
@import views.html.helper.FieldConstructor 
@(field: play.api.data.Field, options: Seq[(String,String)], args: (Symbol,Any)*)(implicit handler: FieldConstructor, messages: play.api.i18n.Messages) 

@input(field, args.map{ x => if(x._1 == '_label) '_name -> x._2 else x }:_*) { (id, name, value, htmlArgs) => 
    <span class="buttonset" id="@id"> 
    @defining(field.indexes.flatMap(i => field("[%s]".format(i)).value).toSet) { values => 
@options.map { v => 
    <div> 
    <input type="checkbox" id="@(id)_@v._1" name="@{name + "[]"}" value="@v._1" @if(values.contains(v._1)){checked="checked"} @toHtmlArgs(htmlArgs)/> 
    <label for="@(id)_@v._1">@v._2</label> 
    </div> 
} 
    } 
    </span> 
} 

入力はdiv要素に包まれています。