javaformstwitter-bootstrapplayframeworkscala-template

How do I inline form elements with Java Play and bootstrap?


I am new to the Java Play framework and I'm having a surprisingly difficult time to get my templates the way I want them. For example, I would like the case type and date fields to be on the same line here. Whenever I use inline, the fields overlap though, and horizontal forms don't get the job done. Any ideas? The code sample and image use horizontal field constructors. enter image description here

@(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>

}

Solution

  • I fixed this by using a vertical implicit constructor for play-bootstrap. Then I can specify the column width of each field like so:

    @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>
    
    }
    

    Note that the b3 constructor automatically adds the form-group class to an input field so I don't need it. Details for play-bootstrap can be found here: http://adrianhurt.github.io/play-bootstrap/