CookBook

IM-BloomMaker エレメントを狙った位置に配置する方法

投稿日:

この CookBook ではエレメントを狙った位置に配置する方法について紹介します。
エレメントを配置する方法として、エレメントをドラッグ&ドロップする方法がありますが、
配置先のスペースが狭いとなかなか思い通りの位置に配置できない場合があります。

そこでエレメントを狙った位置に配置する方法を以下のシチュエーションごとに動画で説明します。

  1. エレメントを新規で配置する場合
  2. 配置済みのエレメントを移動させる場合

1. エレメントを新規で配置する場合

エレメントパレットをダブルクリックすることでエレメントを配置できます。


動画の操作説明

ボックス内に更にボックスを配置したレイアウトを使用しています。
ここでは親のボックスをボックス①、その子にあたるボックスをボックス②とします。

動画では最初にボックス②を選択しています。
これはボックス②の中にエレメントを配置するためです。
ダブルクリックでエレメントを配置する場合、選択しているエレメント内に配置されます。

エレメントパレットからラベルをダブルクリックしています。
ボックス②の中にラベルが配置されました。

ボックス①を選択し、エレメントパレットから強調ラベルをダブルクリックしています。
ボックス①の中に強調ラベルが配置されました。

ダブルクリックでエレメントを配置する場合、選択しているエレメント内の最後尾に配置されます。
そのため強調ラベルボックス②の後ろに配置されています。

2. 配置済のエレメントを移動させる場合

画面構成からエレメントツリーをドラッグ&ドロップすることでエレメントの移動ができます。


動画の操作説明

「1. エレメントを新規で配置する場合」の続きから実施しています。
画面の右側にある「画面構成」を使用します。

「画面構成」のタブをクリックするとコンテナページ内に配置しているエレメントの情報がツリー状に表示されます。
このツリーの中身をドラッグ&ドロップで移動させることで、実際に配置しているエレメントの位置も変わります。

強調ラベルを移動させるためドラッグしています。

ツリー上でラベルの上にドロップすると、ボックス②内のラベルの前に移動しました。

続いてラベルをドラッグしています。

ツリー上でボックス②の上にドロップすると、ボックス①内のボックス②の前に移動しました。

このように画面構成のエレメントツリーを操作することでレイアウト上の間隔に関係なく
狙った位置にエレメントを配置することができます。

-CookBook
-

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

no image

ワークスペースとToDo機能との連携

このCookBookでは、「intra-mart Accel Collaboration」の機能の1つであるワークスペースと「intra-mart Accel Collaboration」のToDo機 …

IM-BloomMaker のアクション「複数選択組織検索ダイアログを表示する」の使い方

このCookBookでは、「複数選択組織検索ダイアログを表示する」アクションの使用方法について紹介します。 「複数選択組織検索ダイアログを表示する」アクションは、共通マスタから取得した組織情報をダイア …

処理モーダルで差戻先ノードを固定する

このCookBookでは、ボタンアイテム(処理モーダル)において、差戻先ノードを固定する方法を紹介します。 完成イメージ ノード「approve2」の差戻先ノードをノード「apply」に固定する。 処 …

no image

Formaのスクリプトから処理対象者を制御するには

このCookBookでは、スクリプトを利用してIM-Workflowの動的ノード(動的承認、縦配置、横配置)の処理対象者を制御する方法をご紹介します。 スクリプトから動的処理対象者設定機能を利用するこ …

no image

IM-BloomMaker 「外部リソース埋め込みコンテナ」エレメントを使用してパブリックストレージ上のファイルを閲覧する画面を作成する方法

このCookBookでは、2021 Spring でリリースした「外部リソース埋め込みコンテナ」エレメントの利用方法について説明していきます。 「外部リソース埋め込みコンテナ」エレメントはファイルのド …