2

私は Java Play フレームワークに不慣れで、思い通りのテンプレートを取得するのに驚くほど苦労しています。たとえば、ここではケース タイプと日付フィールドを同じ行に配置したいと考えています。インラインを使用するときはいつでも、フィールドがオーバーラップし、水平フォームではうまくいきません。何か案は？コード サンプルと画像では、水平フィールド コンストラクターを使用しています。 ここに画像の説明を入力

@(caseForm: play.data.Form[Case])

@import tags._
@import views.html.common._

@import models._

@implicitFieldConstructor = @{
    b3.horizontal.fieldConstructor("col-md-2", "col-md-10")
}
@inlineFC = @{
    b3.inline.fieldConstructor
}
@caseTypeFC = @{
    b3.horizontal.fieldConstructor("col-md-2", "col-md-4")
}
@dateFC = @{
    b3.horizontal.fieldConstructor("col-md-7", "col-md-4")
}

@main("New Case Info") {
    <div class="page-header">
        <h2>Case Information</h2>
    </div>
    <fieldset>
    @b3.form(action = routes.CaseController.save()) {
        <div class="form-group">
            @b3.select(caseForm("id"),
            options = Seq("G" -> "Government Reclamations", "P" -> "POA", "R" -> "Reversals/Deletions", "U" -> "Unresolved/Dishonored Returns"),
            '_label -> "Case Type",
            '_default -> "-- Select an Option --")(caseTypeFC, implicitly[Messages])
            @datePicker(caseForm("date"), '_label -> "Date", 'placeholder -> "mm/dd/yyyy")(dateFC)
        </div>

        <div class="form-group">
            <div class="col-md-offset-2">
                <input type="submit" class="btn btn-success" value="Save"/>
                <button type="button" class="btn btn-warning" onclick="window.location='@routes.CaseController.list()';" value="cancel">
                Cancel</button>
            </div>
        </div>
    }

    </fieldset>

}
4

1 に答える 1

0

play-bootstrap の垂直暗黙コンストラクターを使用して、これを修正しました。次に、各フィールドの列幅を次のように指定できます。

@main("New Case Info") {
<fieldset>
    @b3.form(action = routes.CaseController.save()) {
    <div class="row">
        <div class="col-md-4">
            @b3.select(caseForm("caseType"),
                options = options(Case.typeOptions),
                '_id -> "type_selection",
                '_label -> "Case Type",
                '_default -> "-- Select a Type --")
        </div>
        <div class="col-md-3">
            @datePicker(caseForm("date"), '_label -> "Date", 'placeholder -> "mm/dd/yyyy")
        </div>
    </div>
 </fieldset>

}

b3 コンストラクターは form-group クラスを入力フィールドに自動的に追加するため、必要ないことに注意してください。play-bootstrap の詳細については、http: //adrianhurt.github.io/play-bootstrap/を参照してください。

于 2016-03-04T16:13:03.347 に答える