地図表示＋div要素表示について

kintone カスタマイズ
1

お世話になっております。

 

以下を参照に、地図アプリを作っております。

■顧客訪問リストを地図にピン表示する

https://cybozudev.zendesk.com/hc/ja/articles/202341964-%E9%A1%A7%E5%AE%A2%E8%A8%AA%E5%95%8F%E3%83%AA%E3%82%B9%E3%83%88%E3%82%92%E5%9C%B0%E5%9B%B3%E3%81%AB%E3%83%94%E3%83%B3%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B

 

実装したいこととしては、レコード一覧画面に、地図と新しく追加したdiv要素を横並びに表示させたいです。

現在のコードは以下の通りですが、地図の横幅をいくら狭めてもdiv要素が横並びになりません。

===============================================================

//表示サイズに関係あるところのみ抜粋

// 地図を表示する div 要素を作成します
var mapEl_address = document.createElement(‘div’);
mapEl_address.setAttribute(‘id’, ‘map_address’);
mapEl_address.setAttribute(‘name’, ‘map_address’);
mapEl_address.setAttribute(‘style’, ‘width: 300px; height: 250px’);

// 「Map」スペース内に mapEl_address で設定した要素を追加します
var elMap = kintone.app.record.getSpaceElement(‘Map’);
elMap.appendChild(mapEl_address);

// 「Map」スペースの親要素のサイズを変更します
var elMapParent = elMap.parentNode;
elMapParent.setAttribute(‘style’, ‘width: 300px; height: 250px’);

// 一覧の上部部分にあるスペース部分を定義します
var elAction = kintone.app.getHeaderSpaceElement();

// 地図を表示する要素を定義し、スペース部分の要素に追加します#1
var mapEl = document.createElement(‘div’);
mapEl.setAttribute(‘id’, ‘map’);
mapEl.setAttribute(‘name’, ‘map’);
mapEl.setAttribute(‘style’, ‘width: 70%; height: 250px; margin-right: 30px; border: solid 2px #c4b097’);
elAction.appendChild(mapEl);

// 地図を表示する要素を定義し、スペース部分の要素に追加します#2
var list = document.createElement(‘div’);
list.setAttribute(‘id’, ‘list’);
list.setAttribute(‘name’, ‘list’);
list.setAttribute(‘style’, ‘width: 15%; height: 250px; margin-right: 30px; border: solid 2px #c4b097’);
elAction.appendChild(list);

===============================================================

上記より、「list」が新しく追加したdiv要素です。

mapElが70%、listが15%なので横並びされると思っているのですが、指定方法は間違っておりますでしょうか？

2

y-kishiさん

div要素はデフォルトでCSSのdisplayパラメータがblockになっているためそのままでは一行に並べて表示などはできません。
そのため、横に並べたい要素は display: inline-block;のCSSを設定し、それらの親となる要素をdisplay:block;のCSSを設定する。またはdisplay:table;やdisplay:table-row; , display:table-cell;などを利用してテーブルレイアウトするなどの処理が必要です。

詳しくは以下のURLや、CSSのdisplay属性について検索して頂けるとわかりやすいかと思います。

https://developer.mozilla.org/ja/docs/Web/CSS/display

3

瀧ヶ平様

 

ご回答いただきありがとうございます。

「display: inline-block」を追加し、以下のように変更したところ、横並びに表示することができました。

====================================================

// 地図を表示する要素を定義し、スペース部分の要素に追加します#1
var mapEl = document.createElement(‘div’);
mapEl.setAttribute(‘id’, ‘map’);
mapEl.setAttribute(‘name’, ‘map’);
mapEl.setAttribute(‘style’, ‘width: 70%; height: 250px; margin-right: 30px; border: solid 2px #c4b097; display: inline-block’);
elAction.appendChild(mapEl);

// 地図を表示する要素を定義し、スペース部分の要素に追加します#2
var list = document.createElement(‘div’);
list.setAttribute(‘id’, ‘list’);
list.setAttribute(‘name’, ‘list’);
list.setAttribute(‘style’, ‘width: 15%; height: 250px; margin-right: 30px; border: solid 2px #c4b097; display: inline-block’);
elAction.appendChild(list);

====================================================

cssの初歩的なご質問となってしまい申し訳ありませんでした。

ご案内いただいたURLも参考にし、勉強させていただきます。