日日是Oracle APEX: テキスト・フィールドの横に配置したボタンを整列させる

2021年11月4日木曜日

Oracle APEXのIdeas & Feature Requestsを見ていたら、FR-1601(Align buttons and text items by default)というのがありました。ページ・アイテムとボタンは最初から以下のような配置になるようにしてほしい、という要望です。

テキスト・フィールドのページ・アイテムの右横にボタンを配置する、というのはありがちなレイアウトでしょう。以下のようにボタンのレイアウトの新規行の開始をOFFにすると、ボタンの配置は先行しているページ・アイテムの右隣になります。

画面上の表示は以下になり、ボタンがちょっと上になります。見栄えはよくありません。

対応には色々な方法があると思いますが、CSSのフレックスボックスとAPEXのプロパティの行CSSクラスを使った対応を紹介します。

最初にページ・プロパティに以下のCSSクラスmyc-aligncenterを定義します。(2022年10月2日 - Universal ThemeのLayout Modifier u-align-items-centerが同じ効果を持つので、新たにCSSクラスの定義は不要でした。)

.myc-aligncenter {
  display: flex;
  align-items: center;
}

定義したクラスを行の先頭となるコンポーネント、今回の例ではページ・アイテムP1_ITEMのレイアウトの行CSSクラスに指定します。

以上の設定で、最初の画面の配置になります。

Oracle APEXのアプリケーション作成の参考になれば幸いです。

完