Scala Template apply style to inputText's label [Play 2 HTML5 helper tag]

Question

I am using scala template with input helper.

The class attribute which i use applies style for the <input> tag.

How do i apply the style specific to the generated <label> tag?

@inputText(orderItem("item1"),'_label -> "Product*",'_class -> "tinytfss")

Thanks in advance for your support. Manoj

Answer 1

You could try ditching the built-in field constructors and instead write your own. The following template accepts a custom argument that controls the styling of the label:

app/views/_my_field_constructor.scala.html

@(element: helper.FieldElements)

<div class="clearfix @if(element.hasErrors){error}">
  <label for="@element.id" class="@element.args.get('_label_class)">@element.label</label>
  <div class="input">
    @element.input
  </div>
</div>

Now use your new field constructor instead of whichever built-in one you were using before:

app/views/form.scala.html

....
@* implicitFieldConstructor = @{ FieldConstructor(twitterBootstrapInput.f) } *@
@implicitField = @{ FieldConstructor(_my_field_constructor.f) }
....

When calling the helper function to create a input text field, you can now pass in a custom _label_class argument that the template will pick up:

app/views/form.scala.html

@inputText(orderItem("item1"), '_label -> "Product", '_label_class -> "red", '_class -> "tinytfss")

Answer 2

I just ran into this problem myself, but I was able to solve it without using a custom FieldConstructor. All I did was change my form helper line to include a form id, and then reference the label for that form in css. Like so:

scala template file:

    <style>
        #new-tenant-form label {
            font-weight: bold;
        }
    </style>

. . .

    @helper.form(routes.Tenants.create(), 'id -> "new-tenant-form") {
           . . .