CookBook

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

投稿日:

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

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

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

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

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


動画の操作説明

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

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

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

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

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

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

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


動画の操作説明

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

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

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

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

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

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

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

-CookBook
-

執筆者:


comment

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

関連記事

IM-FormaDesignerにてブラウザのツールバーに任意のタイトルを設定する方法

このCookBookでは、IM-FormaDesignerにてブラウザーのツールバーに任意のタイトルを設定する方法について紹介しています。 設定方法は下記の2パターンです。 「スクリプト」アイテムを使 …

no image

フォーム内の入力値を案件名に自動入力する方法

このCookbookでは、IM-FormaDesignerで作成した申請画面から入力内容を案件名に設定する方法を紹介します。 この方法を利用するとIM-FormaDesignerの入力内容をIM-Wo …

no image

ViewCreatorでIM-Workflowのフロー毎の取止め・差戻し案件件数を表示する。

このCookBookでは、ViewCreatorでIM-Workflowのフロー毎の取止め/差戻し案件件数を表示する方法を説明します。 検索条件を変更することで、IM-Workflowの特定の状況をモ …

no image

IM-BloomMaker 複数のプルダウンを連携させる方法

この CookBook では、IM-BloomMaker を使用して、複数のプルダウンを連携させる方法を紹介します。例として都道府県を選択後に、その中に含まれる市区町村がプルダウンから選べるようにしま …

ワークフローの参照者を動的に設定する

このCookbookでは、IM-Workflow 2018 Springから新たに追加された 処理対象者プラグイン「ロジックフロー(ユーザ)」 の設定方法を紹介いたします。 この機能を利用すると、申請 …