本日のゴール

XPageの利点は、編集モード、参照モードを元から持っている点ですが、欠点としては参照モードのレイアウトを指定する項目がありません。
ここでは参照モードで生成されるタグに対して、デザインの調整を行います。
【完成イメージ】

テキストを上下中央にする

編集ボックスなどの編集モード用コンポーネントにはBootstrapのCSSクラスを指定してデザインの調整できますが、参照モードでは割り当てたCSSクラスは適用されません。
参照モードのデザインを調整するには、外側のHTMLタグに対してCSSクラスを指定します。
※ココで割り当てるオリジナルCSSクラスは「連続講座⑧　フォームを作る①：フォームのレイアウト」で定義済みです。

1	編集ボックスの参照モードではCSSクラスが適用されないため、上寄せになってしまう。 回避するには外側にある<div>タグに対してCSSクラスを指定する。 ※左の画面は、わかりやすくするために開発者ツールで色を変更
2	編集ボックス、計算結果テキストの外側にある<div>タグに 「org_text_center」 CSSクラスを追加する。
3	ブラウザでプレビューし、表示内容を確認する。

複数行編集ボックスに高さを持たせる

複数行編集ボックスは、編集モード時の行数(高さ)は指定できますが、参照モードでの行数指定できないので、CSSクラスを指定します。
※ココで割り当てるオリジナルCSSクラスは「連続講座⑧　フォームを作る①：フォームのレイアウト」で定義済みです。

1	複数行編集ボックスの参照モードは、入力した文章の行数に合わせて高さが変更されるが、本文であることをわかりやすくするため、CSSクラスを指定する。
2	編集ボックス、計算結果テキストの外側にある<div>タグに 「org_min_h100」 CSSクラスを追加する。
3	ブラウザでプレビューし、表示内容を確認する。
4	【注意】 複数行編集ボックスの<div>タグには「org_text_center」を指定しない。 指定すると、本文が上下中央揃えになっていまい、見にくくなる。