# kintone UI Component v1 グループ内にドロップダウンを作成すると表示が崩れる

**URL:** <https://community.cybozu.dev/t/topic/7066>\
**Category:** kintone 開発相談\
**Created:** [2021 年 4 月 8 日午前 6:35 UTC](https://community.cybozu.dev/t/topic/7066 "2021-04-08T06:35:38Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account2676](https://avatars.discourse-cdn.com/v4/letter/l/e9bcb4/32.png) [@Legacy\_Account2676](https://community.cybozu.dev/u/Legacy_Account2676)\
**Post date:** [2021 年 4 月 8 日午前 6:35 UTC](https://community.cybozu.dev/t/topic/7066/1 "2021-04-08T06:35:38Z")

</div>

- kintone UI Component v1でドロップダウンメニューを設置する際、「グループ」フィールド内に設置したスペースを指定するとラベル内容が表示されない。
- 「グループ」内に設置されている空白のドロップダウンをクリックすると正常にメニュー内容が表示され、選択した値（event.detail.value）の取得も正常に行われている。

「グループ」内でドロップダウンメニューを正常に表示するための方法がありましたらご教示いただきたく思います。

**利用したソースコード**

（ドロップダウンメニュー部分のみ抜粋）

```
(function() {
'use strict';
const events = ['app.record.edit.show','app.record.create.show'];

/* ドロップダウンメニュー */
const item = [
{ label: '(選択してください)', value: '' },
{ label: 'りんご', value: 'りんご' },
{ label: 'みかん', value: 'みかん' },
];
const dropdown1 = new Kuc.Dropdown({
label: '検証用1',
items: item,
value: '',
id: 'dropdown1'
});
const dropdown2 = new Kuc.Dropdown({
label: '検証用2',
items: item,
value: '',
id: 'dropdown2'
});

/* イベント */
kintone.events.on(events, function(event) {
const dropdownSpace1 = kintone.app.record.getSpaceElement('dropdown1'); //グループ内のスペース
const dropdownSpace2 = kintone.app.record.getSpaceElement('dropdown2'); //通常のスペース
dropdownSpace1.appendChild(dropdown1);
dropdownSpace2.appendChild(dropdown2);

//on change(dropdown1)
dropdown1.addEventListener('change', event => {
rec1 = event.detail.value;
console.log(rec1);
return event;
}); //on change(dropdown1) ここまで

//on change(dropdown2)
dropdown2.addEventListener('change', event => {
rec2 = event.detail.value;
console.log(rec2);
return event;
}); //on change(dropdown2) ここまで
return event;
});
})();

```

---

<div class="post-metadata">

**Author:** ![Legacy\_Account980](https://avatars.discourse-cdn.com/v4/letter/l/a183cd/32.png) [@Legacy\_Account980](https://community.cybozu.dev/u/Legacy_Account980)\
**Post date:** [2021 年 4 月 14 日午前 6:20 UTC](https://community.cybozu.dev/t/topic/7066/2 "2021-04-14T06:20:03Z")

</div>

こんにちは！

私も、グループ内にドロップダウンを設置してみたところ見た目が壊れました！

というわけで、Github Issueに投げてみました  
[https://github.com/kintone-labs/kintone-ui-component/issues/512](https://github.com/kintone-labs/kintone-ui-component/issues/512)

（もし補足できたら。。。。おねがいします。私英語苦手なもので。。。(T\_T)）

これで修正されたらいいのですが・・・👀

---

<div class="post-metadata">

**Author:** ![Legacy\_Account857](https://avatars.discourse-cdn.com/v4/letter/l/ba9def/32.png) [@Legacy\_Account857](https://community.cybozu.dev/u/Legacy_Account857)\
**Post date:** [2021 年 7 月 23 日午前 7:06 UTC](https://community.cybozu.dev/t/topic/7066/3 "2021-07-23T07:06:43Z")

</div>

現在私も似たような症状が出ているのですが、バグでしょうか？

ドロップボックスのリストは表示されるのですが、選んだ項目名が表示されません。ずっと真っ白です。  
中身のValueは取得できていますが、labelにセットされた表示名が出ない状態です。

追記\>\>  
labelとvalueを同じにしたら選ばれた項目の表示もされました。  
valueに数字などを使うと表示されませんでした。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account980](https://avatars.discourse-cdn.com/v4/letter/l/a183cd/32.png) [@Legacy\_Account980](https://community.cybozu.dev/u/Legacy_Account980)\
**Post date:** [2021 年 7 月 26 日午前 4:28 UTC](https://community.cybozu.dev/t/topic/7066/4 "2021-07-26T04:28:50Z")

</div>

901910279506&nbsp;さん

371176568012&nbsp;さん

お久しぶりです！

こちらの不具合、v1.0.4で修正されております＾０＾  
ご連絡まで～！

[https://github.com/kintone-labs/kintone-ui-component/issues/512](https://github.com/kintone-labs/kintone-ui-component/issues/512)