CODEWITHSUNDEEP
scalaplayframeworkplayframework-2.0textfield
zidarsk8
zidarsk8

Reputation: 3338

textfield with scala play form helper

Scala form helper is not as consistent as I would expect

@form(action = routes.Admin.insertNewArticle, 'class -> "form-horizontal") {
  <fieldset>
    @textarea(field = articleForm("text"), args = 'rows -> 3, 'cols -> 50)
    @input(articleForm("author"), "author")
  </fieldset> 
}

The input fields look really nice and have labels on the left with fields on the right. But the textarea is just weird, it's not wrapped in a <div> with a label, but it's in a <dl> tag and at the bottom there's a 'Required' sign that I don't know how to remove.

Here's the image of how it looks:

enter image description here

Any tips on how I can get the form to look consistent?

Thanks.

Upvotes: 4

Views: 4999

Answers (1)

ryryguy
ryryguy

Reputation: 660

You have a few options.

First, you can override the helper to just put in your own hand-rolled HTML for the textarea control. This is described in the documentation under "Using the form template helpers" under the section "Handling HTML input creation yourself", and common pitfalls are described here. If you want a div containing a label, you'd do something like this:

@helper.input(field = articleForm("text")) { (id, name, value, args) =>
    <div>
        <label>text</label>
        <textarea name="@name" id="@id" rows='3' cols='50'>@value</textarea>
    </div>
}

You can also use CSS to style the default HTML produced by the textarea helper. The <dl> tag is simply a definition list and can by styled much like any html list. For reference, you can find the default field constructor code in github, which shows you what the generated html looks like.

I assume that the "Required" sign you're talking about is the error <dd> tag you can see in that generated HTML. If you aren't going the hand-rolled HTML route, then to get rid of it you'll need to define your own field constructor. That is also described in the Play help page I linked to above. But if all you care about is getting rid of the error, it should be pretty easy, just make a copy of the default field constructor code (also linked above), and alter or just remove the parts that read @if(elements.hasErrors) {error} and the three lines starting with @elements.errors(elements.lang).map. The "Required" error itself is from @elements.infos....

Or is the problem that this field is not supposed to be required? That is an issue with the form definition, not the helper. Make the "text" field in your form optional, as shown on the Scala Forms help page under "Optional values". For example, if your task definition is in Application.scala:

   val taskForm = Form (
     "text" -> optional(text) // changed from 'nonEmptyText'
   )

This will also make the "text" field map to an Option[String] instead of a plain String. If your form is backed by a case class (or other mapping logic), you'll have to change it accordingly.

Upvotes: 3

Related Questions