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.
@(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>
}
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/