如何使用Java Play和Bootstrap內聯表單元素？

我是Java Play框架的新手，我有一個令人驚訝的困難時間以我想要的方式獲取我的模板。例如，我希望案例類型和日期字段在這裏位於同一行。無論何時使用內聯，字段重疊，而水平表單不會完成工作。有任何想法嗎？代碼示例和圖像使用水平字段構造函數。如何使用Java Play和Bootstrap內聯表單元素？

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

}

來源

2016-02-26 Kaitrono

我通過使用播放引導垂直隱式構造函數解決了這個問題。然後我就可以像這樣指定每個字段的列寬：

@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構造函數自動添加表格組類的輸入字段，所以我並不需要它。 Play-Bootstrap的詳細信息可以在這裏找到：http://adrianhurt.github.io/play-bootstrap/

來源

2016-03-04 16:13:03 Kaitrono

如何使用Java Play和Bootstrap內聯表單元素？

回答

相關問題