サポート > リポジトリ > 入力制御 > 入力欄のスタイル指定
ja | en

入力欄および、これを囲う領域にスタイルを指定することができます。

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

図1 入力欄へのスタイル適用

"入力欄" で実際に入力するタイミングでは、背景は白色となります。カーソルが移動すると、指定した背景色に変わります。

図2 入力時は背景は白色になる
図3 入力が終了すると再び背景色がセットされる

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

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

background-color: beige
図2 スタイルの適用設定
図2にあるように、CSSでは色名を直接、指定することもできます。

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

width:50px
width:9em

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

具体的な設定例は「入力制御 > 入力フィールド長 > リストボックスの場合」をお読みください。

日付型(カレンダ入力)

この設定は日付型(カレンダ入力)にも適用できます。具体的な設定例は「入力制御 > 入力フィールド長 > 日付型(カレンダ利用)の場合」をお読みください。

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

図3 div 要素へのスタイル指定の例

設定方法

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

div{height:150px;overflow-y:scroll;}
図4 スタイルの指定

チェックボックス・ラジオボタンの折り返し数

図3の例では、チェックボックス・ラジオボタンの折り返し数も指定しています。

図5 チェックボックス・ラジオボタンの折り返し数

レイアウト

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

図6 レイアウトの設定
図7 レイアウトの並び設定

他の設定との併用

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

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

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

div{height:150px;overflow-y:scroll;} color:red
図8 div要素とspan要素の両方を設定する

詳細画面への設定

「出力制御(スタイル) > CSSクラス名・スタイルの指定」をお読みください。

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

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

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

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

全画面共通のリポジトリキーはpresentation/displayitem/@style_inputallです。領域指定はpresentation/displayitem/@style_inputall_2です。

登録画面のリポジトリキーはpresentation/displayitem/@style_insertです。領域指定はpresentation/displayitem/@style_insert_2です。

更新画面のリポジトリキーはpresentation/displayitem/@style_updateです。領域指定はpresentation/displayitem/@style_update_2です。

コピー登録画面のリポジトリキーはpresentation/displayitem/@style_copyです。領域指定はpresentation/displayitem/@style_copy_2です。

一覧更新画面のリポジトリキーはpresentation/displayitem/@style_updatelistです。領域指定はpresentation/displayitem/@style_updatelist_2です。

親モデルとの同時更新画面のリポジトリキーはpresentation/displayitem/@style_updatelistInParentです。領域指定はpresentation/displayitem/@style_updatelistInParent_2です。