当ブログに掲載しているサンプルは、すべて利用者の自己責任という形でお願いします。
ただし、明らかな不具合がある場合、ご連絡いただければ、訂正記事を出します。
また、こちらのサンプルは、別のサイト等への公開、転載は一切禁止しています。
どうしてもと言う場合は、筆者にあらかじめご連絡ください。

テクてく Lotus 技術者 Slack に参加しよう!

2012年9月28日金曜日

コントロールの余白を設定するとスクロールバーが表示されるのが嫌だ!

XPages はHowToをまとめるのが難しくて、サンプルDBをばらばらと作っているのです。
なので、思いつくまま作っていると、どんなサンプルかを忘れてしまうんですね。

ということで今回は、ちょっとしたことなんだけど、忘れたら困るというものを備忘録のような形で書きます。
内容は薄いよ。だから期待しないでね。

それでも良いよと言う人は、このボタンを押してから、読んでくださいね。
にほんブログ村 IT技術ブログへ


では、本題。
XPage に、コントロールを配置してブラウザ等でプレビューすると、コントロールは左上に配置されます。
下図は、パネルコントロールとその中にラベルコントロール(サンプルアプリケーションというラベル)を配置して、Firefoxでプレビューしたものです。
パネルとラベルコントロールを配置したサンプルアプリケーション

パネルに境界線を設定して、再度Webブラウザでプレビューしてみます。
パネルコントロールに境界線を設定
パネルコントロールに境界線を設定してプレビュー

プレビューをよく見ると、境界線がぴったりとくっついています。余白を設定していないので当然と言えば当然です。
でも、これではちょっとみにくいので余白を設定してみましょう。



上、左、右にそれぞれ5.0ピクセルずつ余白を設定します。

この状態で、Webブラウザでプレビューしてみましょう。
パネルコントロールに余白を設定
パネルコントロールに余白を設定してプレビュー

なぜか、スクロールバーが表示されています。
どうも、余白(上)を設定すると、その分、下にスクロールされてしまうようです。
せっかく余白を設定して、見栄えが良くなったというのに、これはいただけません。

どうにかして、幅きっちりではなく余白を残した上でスクロールバーを表示させないようにしたいものです。
・・・色々と試行錯誤した結果、次の方法で解決(回避?)できました。

  1. パネルの余白、境界線の設定を全部初期化する。
  2. パネルの中に表コントロールを配置する。
  3. 表コントロールに余白と境界線を設定する。
  4. 表コントロールのセルの中にラベルを移動する。

では、詳しく見ていきましょう。

1.パネルの余白、境界線の設定を全部初期化する。
これは、もうそのままですね。上記で設定した内容を元に戻します。

次に、2.パネルの中に表コントロールを配置する。
コントロールビューから表コントロールをドラッグ&ドロップします。
表のサイズは、1行1列、100%幅とします。
表コントロールの挿入

表コントロールの位置は、アウトラインビューを使うと変更しやすいです。

今度は、3.表コントロールに余白と境界線を設定する。
まず、表全体の余白を設定します。この時、設定する余白は余白(内側)です。CSSでいうと、paddingですね。
左右上をそれぞれ5.0ピクセルとします。
表コントロールの余白(内側)を設定

境界線の設定ですが、これは表コントロール自身ではなく、その中に含まれる「表のセル」に対して設定します。
アウトラインビューで表コントロールを展開していくと、「表の行」「表のセル」と表示されてくるので、この「表のセル」を選択します。
この状態で、プロパティビューの「背景」タブを選択します。
「表のセル」のプロパティビュー

ここに、境界線の設定があるので、最初と同じように境界線を設定します。
「表のセル」に境界線を設定

これで、境界線が設定できたので、最後に4.表コントロールのセルの中にラベルを移動する。
これも、アウトラインビューで操作すると簡単にできます。
移動する先は、「表のセル」の中です。移動した後のアウトラインビューは以下のようになります。
完成時のアウトラインビュー

では、保存してWebブラウザでのプレビューを見てみましょう。
完成ページのプレビュー

どうでしょう?スクロールバーが表示されていません。ちゃんと余白を残して、境界線が表示されています。


ということで、少々面倒ではありますが、これで多少なりとも見栄えを良くすることが出来ました。
OneUI とか難しいことを知らなくても出来るんだな。ということが分かってもらえれば嬉しいです。

で、この設定、結構忘れてしまうので、このように記事にしたのでした。
いやぁ、この設定を思い出すのに(というか、再現するのに)2日間もかかるとは・・・

普段から整理しながら仕事をすることが大事だ!と痛感した筆者でした。
お粗末・・・



【PR】ノーツ/ドミノに関するお問い合わせは下記まで【PR】
単純なDBのカスタマイズから他アプリケーションとの連携までご要望にお応えします
Lotus Notes/Domino カスタマイズとセキュリティ強化 - 株式会社エフ

0 件のコメント: