【借入返済予定表と借入分析】NO.1 追加した要素が重なる事象を解決

スポンサーリンク

金融機関からの借入(融資)の返済予定表と借入状況の分析を支援するシステムの機能のひとつに、各借入ごとにメモを記入でき、ファイルも添付できる機能があるのですが、メモを書いた時やファイルを添付した時に、借入返済予定表の中に、この借入には「メモがあるよ」「ファイルが添付されているよ」ということがすぐに把握できるようアイコンを表示しています。

今回の事象は、新規にメモを追加したりメモを消したり、ファイルを添付したり削除したりした時に、動的にメモ用アイコン、ファイル用アイコンを表示したり消したりするのですが、表示した際にそれらのアイコンが重なってしまうという事象が発生したので、その解消方法を記録しておきます。

要素(アイコン)が重なっている状況

期待している画面表示状況(下図の上)と、期待した通りにならずアイコンが重なった状況(下図の下)です。

上が期待している画面、下がうまく表示されていない(重なって表示)画面です。メモ用アイコンと添付ファイル用アイコンが重なっているのがわかると思います。

追加した要素が重なる

追加した要素が重なる

 

要素(アイコン)を追加する時に使用している方法

要素(アイコン)を追加する時は、jQueryのappendを使っています。

$(“追加するセレクタ”).append(追加する内容);

要素(アイコン)が表示されない!?

上記のappendでアイコンを追加しても、画面上にアイコンが表示されないという事象も発生しました。

表示されるようにするには、zindexを設定(設定値は適当に1000を設定しました)してあげる必要があるようです。また同時に、positionにもabsoluteを設定してあげる必要があるようです。

*いろいろと試した結果、上記のzindexとpositionを設定することで表示されるようになりました(他にも方法はあると思いますが...)。

設定は、jQueryを使い、以下のようにしました。

$(“設定するセレクタ”).css({ position:’absolute’,zIndex:1000 });

これで無事にアイコンが表示されるようになりました。

要素(アイコン)が重なるのを防ぐ方法

要素が重なることを防ぐため、追加するセレクタにmargin(bottom)を設定したり、追加する要素の次の要素にmargin(top)を設定したり、appendではなくprependを使ったりと、様々な方法を試してみましたが、結局はどの方法でも要素の重なりを防ぐことはできませんでした。

最終的に要素が重ならないようにした方法は、とても単純な方法でした。

まず、アイコンについてご説明します。

借入返済予定表には、3つのアイコンを表示しています。

ひとつは、借入条件の内容を変更するための「条件変更用アイコン」、それと、今回対象となった、「メモ有無アイコン」、「添付ファイル有無アイコン」です。

「条件変更用アイコン」は、借入条件をいつでも変更できるよう常時表示しておく必要があります。条件変更用アイコンをクリックすると条件変更画面を表示されます。

また、「メモ有無アイコン」は、まだメモが登録されていない借入返済予定表に新たにメモを追加する際、そのメモを登録する画面を表示するきっかけとなるアイコンが常に表示されていないと、メモ登録用画面を表示できなくなるため、このメモ有無アイコンも常時表示する必要があります(メモ有無アイコンをクリックすることでメモ登録用画面を表示します)。

ただし、メモの有無をすぐに判別できるよう、アイコンの種類をメモの有無によって変えています。上記画像の黒丸のiアイコンがメモありの表示、黒丸のないただのiアイコンはメモなしを表します。

つまり、メモが登録されたら黒丸のiアイコンに変え、メモが消された(または登録されていない)場合に黒丸なしのiアイコンに変えるということです。

この記事とは別の記事になりますが、実は、メモ有無アイコンにマウスポインタを合わせると、メモが登録されている場合には、メモ内容をポップアップ表示で確認できるという機能があります。もちろん、メモがない場合はポップアップ画面は表示されません。

アイコンを変えるために行っている流れは、現在表示されているアイコンを削除し、次にメモの有無によってそのアイコンを追加することを行っています。

この削除した時点で、次の要素(添付ファイル有無アイコン)が上にずれてしまい、その後、メモ有無アイコンを追加すると、添付ファイル有無アイコンに、メモ有無アイコンが重なって表示されてしまうという事象が起こったわけです。

3つ目の「添付ファイル有無アイコン」は、前述の2つのアイコンとは異なり、ファイルが添付されている場合にだけ表示されるアイコンです。添付ファイルは、条件変更画面と、添付ファイル登録画面(添付ファイル有無アイコンをクリックすると開く)の両方から登録・削除するができます。

前置きが長くなりましたが、上述のアイコン表示条件のもと、アイコンが重ならないようにするには、アイコンを表示する親要素にheightを指定することで重なってしまうことを防止できます(考えてみれば当然ですよね)。

<div id=”親要素”>
ここにアイコンを表示する
</div>

これを

<div id=”親要素” style=”height:15px;”>
ここにアイコンを表示する
</div>

としました。15pxは表示するアイコンの高さが約9pxのため、上下の空きバランス等を考え15pxにしています。

この方法で、画面表示時点で、アイコンを表示するエリアの高さを当初から確保しておくという方法です。

*アイコンを追加(append等)したときに、次の要素を下にずらす方法をご存知の方がいらっしゃいましたらお知恵をください!

スマートとは言えない方法ですが、もし、同じようなことでお困りの方がいらっしゃれば、何かの参考になれば幸いです。

 

この記事が気に入ったら
いいね ! してね

Twitter でzooを

スポンサーリンク

コメントを残す

*