Playフォームヘルパーを使用しているフィールドの横並びレイアウト

Question

私はPlayフレームワークとプレイ2.5.2を使用するのが初めてです。 一部のページでは、いくつかのフィールドを並べて表示する必要があります。 EXのために

：

製品名

[製品名のテキストボックス]

製品カテゴリ

[製品カテゴリ用のテキストボックス]

価格帯：[から入力ボックス]〜[入力ボックス]

Cit Y

[街のテキストボックス]

製造日：[入力ボックス]から[入力ボックス]に

にはどうすれば（異なっのみの価格帯と製造日を表示）このレイアウトを達成していますか？

私はviews.html.helper（@import helper._）を使用しており、Twitterのブートストラップではありません。 これは私がそれを使用しています方法です：

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

Answer 1

私はそれを行うための方法がたくさんあると信じています。

ここには、idフィールドを持つCSSをカスタマイズするサンプルがあります。 （私は、CSSが得意ではないよ、うまくいけば、いくつかのショーよりよいCSSコード。）

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

その後、あなたは以下のような出力を見ることができます。

独自のフォームのコンストラクタを構築する場合、それはしかし、より良いでしょう。