Side by side layout for some fields using Play form helper

Question

I am new to Play framework and using play 2.5.2. In some of the pages, I need to display few fields one next to another.

For ex:

Product name

[Text box for product name]

Product category

[Text box for product category]

Price range: from [input box] to [input box]

City

[Text box for city]

Manufactured date: from [input box] to [input box]

How do I achieve this layout (displaying only the price range and manufactured date differently)?

I am using views.html.helper (@import helper._) and not twitter bootstrap. This is how I am using it:

@inputText(
  extractSearchForm("productName"),
  '_label -> "Product name",
  'placeholder -> "Product name for ex: Jess Toer"
)

Answer 1

I believe there are a lot of ways to do that.

Here is the sample to customize css with id field. ( I'm not good at CSS, hopefully some shows better css code. )

<style>
.my_form {
  text-align:left;
}

#from dt {
  float:left;
}
#from dd {
  float:left;
}

#to {
  float:left;
}
#to dt {
  float:left;
}
#to dd {
  float:left;
}

#city
{
  clear:left;
}
</style>

<div class="my_form">
@inputText(formData("username"), '_id -> "name", '_label -> "Product name", 'placeholder->"Product name", '_help -> "")
@inputText(formData("username"), '_id -> "category", '_label -> "Product category", 'placeholder->"Product category", '_help -> "")
@inputText(formData("username"), '_id -> "from", '_label -> "Price range: from", 'placeholder->"from", '_help -> "")
@inputText(formData("username"), '_id -> "to", '_label -> "to", 'placeholder->"to", '_help -> "")
@inputText(formData("username"), '_id -> "city", '_label -> "City", 'placeholder->"City", '_help -> "")
</div>

Then you can see the output like below.

If you build your own form-constructor, it'll be better though.