CODEWITHSUNDEEP
playframework
mmdc
mmdc

Reputation: 1746

how can I customize form css?

When using @helper.input.... in template, an example of default css is:

<dl class="error" id="age_field">
    <dt><label for="age">Age:</label></dt>
    <dd><input type="text" name="age" id="age" value=""></dd>
    <dd class="error">This field is required!</dd>
    <dd class="error">Another error</dd>
    <dd class="info">Required</dd>
    <dd class="info">Another constraint</dd>
</dl>

How can I customize it?

Thanks.

Upvotes: 0

Views: 1126

Answers (1)

Damiya
Damiya

Reputation: 834

If your goal is just to apply classes to an input helper, you can do that with a snippet like this:

@helper.inputText(myForm("username"), 'class -> "myClass", 'size -> 30)

If you want to style the error process, you'll need to put together a FieldConstructor that will basically serve as a replacement template for the default input helper.

This can be done by creating a template:

myFieldConstructorTemplate.scala.html

@(elements: helper.FieldElements)

<div class="@if(elements.hasErrors) {error}">
    <label for="@elements.id">@elements.label</label>
    <div class="input">
        @elements.input
        <span class="myErrorClass">@elements.errors.mkString(", ")</span>
        <span class="myHelpClass">@elements.infos.mkString(", ")</span> 
    </div>
</div>

And importing it into the template you want to use it in:

@implicitField = @{ FieldConstructor(myFieldConstructorTemplate.f) }

@inputText(myForm("username"))

Source: Play API Docs

Upvotes: 1

Related Questions