入力欄のスタイル指定

例

入力欄へのスタイル適用は、"入力欄のみ" "入力欄を囲う領域" "両方" を指定することができます。

「モデル項目詳細定義>入力制御>スタイル」を指定します。図2では全画面共通に設定していますが、画面毎に個別に指定することもできます。

入力欄にはCSSを直接、記述します。右側に用意された選択肢で、適用箇所を指定することができます。空白時は "入力欄のみ" となります。

background:beige

図2にあるように、CSSでは色名を直接、指定することもできます。

登録・更新画面でリストボックスの幅を指定する場合は、width 指定を行います。単位はピクセル(px)や1文字分の高さ(em)を用いることができます。

width:50px

width:9em

適用箇所は空白とします。（空白時は、"入力欄のみ" で扱われます。）

ラジオボタンやチェックボックスを格納する div 要素へのスタイルを指定することができます。図3では、高さを150pxとし、スクロールバーを用意する設定を行なった例です。

モデル項目の「入力制御 > スタイル」に次のように div{..} で囲って記述します。

div{height:150px;overflow-y:scroll;}

図3の例では、二つの項目を横並びレイアウトで表示する設定にしています。

選択肢の折り返し数を指定できます。下図は折り返し数を「2」に設定した例です。

「入力制御 > モデル参照 > チェックボックス・ラジオボタンの折り返し数」欄で数値を指定します。

div {...} 設定のあとに、続けて色の指定など、他のスタイルを指定することができます。div {...} で囲まれていないスタイルは、チェックボックス本体に適用されます。

正確には、チェックボックスを囲う span 要素にスタイルが適用されます。

次の例は文字色を赤とした例です。

div{height:150px;overflow-y:scroll;} color:red

CSS記入欄に式を適用することもできます。Wagbyが用意する関数を利用できます。

IF(${age}>30,"background:beige","")

式を用いる場合の注意点は次のとおりです。

CSS部分はダブルクォーテーションで囲ってください。上の例のように、条件が成立しなかった場合は空文字列 ("") を返すようにします。
入力画面へ適用する場合、トリガーとなる項目について「値変更時に画面を再描画する」設定を有効にするとよいでしょう。上の例では、age 項目に適用します。これにより age 項目の値を変更すると画面が再描画され、CSS が適用されるようになります。