CookBook

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

投稿日:

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

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

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

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

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


動画の操作説明

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

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

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

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

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

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

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


動画の操作説明

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

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

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

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

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

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

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

-CookBook
-

執筆者:


comment

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

関連記事

BloomMakerでワークフロー処理モーダルと動的処理対象者設定機能を利用してWorkflowコンテンツを作成する

このCookBookでは、BloomMakerで、ワークフロー処理モーダルと動的処理対象者設定機能を利用したWorkflowのコンテンツを作成する方法を紹介します。 本稿では、BloomMakerでワ …

IM-BloomMaker 「ファイルアップロード」エレメントの利用方法

このCookBookでは、 2020 Spring でリリースした「ファイルアップロード」エレメントの利用方法について説明していきます。 登録画面でアップロードしたファイルを別画面でダウンロードするこ …

no image

グリッドテーブルの列タイプ「カスタム」を利用した場合にマルチセレクトがトグルされないようにする方法

このCookBookでは、グリッドテーブルの列タイプ「カスタム」を利用した場合に、マルチセレクトがトグルされないようにする方法を説明します。 グリッドテーブルでは、行内で参照表示となっている部分をクリ …

no image

スクリプト開発で登録フォームを作成する

このCookBookでは、スクリプト開発で登録フォームを作成する際に役立つ Tips を紹介します。 第1回:スクリプト開発で登録フォームを作成する 第2回:フォームに入力した内容をデータベースに登録 …

no image

intra-mart WebPlatform 7.2 の Docker を作成する

この CookBook では、intra-mart WebPlatform 7.2 の Docker の作成手順について紹介しています。 レシピ ベースイメージの作成 intra-mart WebPl …