# ルックアップ画面の項目表示幅の調整は可能ですか？

**URL:** <https://community.cybozu.dev/t/topic/268>\
**Category:** kintone 開発相談\
**Created:** [2017 年 2 月 17 日午前 8:25 UTC](https://community.cybozu.dev/t/topic/268 "2017-02-17T08:25:37Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account1281](https://avatars.discourse-cdn.com/v4/letter/l/76d3ee/32.png) [@Legacy\_Account1281](https://community.cybozu.dev/u/Legacy_Account1281)\
**Post date:** [2017 年 2 月 17 日午前 8:25 UTC](https://community.cybozu.dev/t/topic/268/1 "2017-02-17T08:25:37Z")

</div>

ルックアップ画面に複数項目を表示した際に、各項目幅は均一になりますが、

項目によって表示幅を変えることは可能ですか？

項目によっては幅が狭くて後ろが欠けてしまう一方、桁数の少ない

項目に広すぎる幅がとられてしまいます。

ルックアップ画面自体の幅を広げることができればそれでもOKです。

よろしくお願いします。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account486](https://avatars.discourse-cdn.com/v4/letter/l/b782af/32.png) [@Legacy\_Account486](https://community.cybozu.dev/u/Legacy_Account486)\
**Post date:** [2017 年 2 月 17 日午前 9:04 UTC](https://community.cybozu.dev/t/topic/268/2 "2017-02-17T09:04:55Z")

</div>

竹太郎さん

ルックアップ画面とはレコード詳細画面のルックアップ項目ですか？

フィールドの幅なら、フォーム設定画面でドラッグ＆ドロップで幅を調整できます。

ルックアップの設定画面なら調整できないと思います。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1281](https://avatars.discourse-cdn.com/v4/letter/l/76d3ee/32.png) [@Legacy\_Account1281](https://community.cybozu.dev/u/Legacy_Account1281)\
**Post date:** [2017 年 2 月 17 日午後 12:44 UTC](https://community.cybozu.dev/t/topic/268/3 "2017-02-17T12:44:11Z")

</div>

Qiuxiang Suさん

早速の回答ありがとうございます。

貼っていただいた画面の「取得」ボタンを押したときに表示される画面です。

やはり調整できませんか。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1517](https://avatars.discourse-cdn.com/v4/letter/l/4bbf92/32.png) [@Legacy\_Account1517](https://community.cybozu.dev/u/Legacy_Account1517)\
**Post date:** [2017 年 2 月 19 日午前 2:04 UTC](https://community.cybozu.dev/t/topic/268/4 "2017-02-19T02:04:39Z")

</div>

竹太郎さん

CSS で調整できます。  
基本的には、調整したい項目幅を指定すると、他は自動調整されますので、  
バランスのいい幅に微調整します。

アプリにルックアップ項目が一つの場合は、項目の何番目かを指定して調整します。  
1番目は、選択ボタンです。

```
/* 選択ボタン */
.listTable-gaia.lookup-table-gaia th:first-child {
width: 100px;
}
/* 1番目の項目 */
.listTable-gaia.lookup-table-gaia th:nth-child(2) {
width: 150px;
}
/* 2番目の項目 */
.listTable-gaia.lookup-table-gaia th:nth-child(3) {
width: 300px;
}

```

アプリにルックアップ項目が二つ以上の場合は、項目につけられている番号を指定して調整します。  
n番目の指定だと全部のルックアップ表示が変わるためです。  
label-xxxxxxx の番号は、ブラウザのデバッグツールなどで調べてください。  
chrome の場合、ルックアップ選択ダイアログのテーブルヘッダ項目ラベル部分を右クリックして、「検証」で th の部分を調べます。

```
/* 項目番号の指定 */
.listTable-gaia.lookup-table-gaia th.label-5316519 {
width: 250px;
}
/* 項目番号の指定 */
.listTable-gaia.lookup-table-gaia th.label-5328632 {
width: 400px;
}

```

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1281](https://avatars.discourse-cdn.com/v4/letter/l/76d3ee/32.png) [@Legacy\_Account1281](https://community.cybozu.dev/u/Legacy_Account1281)\
**Post date:** [2017 年 2 月 19 日午前 9:31 UTC](https://community.cybozu.dev/t/topic/268/5 "2017-02-19T09:31:51Z")

</div>

rex0220さん

お世話になっております。  
以下のCSSを追加して思い通りのルックアップ選択ダイアログに調整できました。

.listTable-gaia.lookup-table-gaia th.lookup-cell-gaia { width: 80px;} /\* 選択ボタン \*/  
.listTable-gaia.lookup-table-gaia th.label-5208572 { width: 130px;} /\* １列目 \*/  
.listTable-gaia.lookup-table-gaia th.label-5208568 { width: 130px;} /\* ２列目 \*/  
.listTable-gaia.lookup-table-gaia th.label-5208567 { width: 130px;} /\* ３列目 \*/  
.listTable-gaia.lookup-table-gaia th.label-5208594 { width: 80px;} /\* ４列目 \*/  
.listTable-gaia.lookup-table-gaia th.label-5268399 { width: 300px;} /\* ５列目 \*/

label-xxxxxxx の番号は、ご教授いただいた通り、chromeの「検証」で調べたソースから  
取得しました。  
詳しい解説ほんとうにありがとうございました。  
とても勉強になりました。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2202](https://avatars.discourse-cdn.com/v4/letter/l/85f322/32.png) [@Legacy\_Account2202](https://community.cybozu.dev/u/Legacy_Account2202)\
**Post date:** [2020 年 7 月 16 日午前 7:28 UTC](https://community.cybozu.dev/t/topic/268/6 "2020-07-16T07:28:45Z")

</div>

全く同じ質問をさせていただきます。失礼いたします。

今現在のkintoneではそれぞれ どれがどれになるでしょうか？

.listTable-gaia. → lookup-selector-gaia ？  
lookup-table-gaia → recordlist-header-cell-gaia？

label →「取得」ボタンを押す前の、ルックアップフィールドの control-value-gaia value-xxxxxのこと？

色々試しましたが lookup-selector-gaia でアプリ内のすべてのルックアップ取得ボタン押下時に出る「レコードの選択時に表示するフィールド」画面のサイズを変えることはできましたが、特定のルックアップ画面の指定につまずいています。

ご教授よろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1517](https://avatars.discourse-cdn.com/v4/letter/l/4bbf92/32.png) [@Legacy\_Account1517](https://community.cybozu.dev/u/Legacy_Account1517)\
**Post date:** [2020 年 7 月 16 日午前 8:52 UTC](https://community.cybozu.dev/t/topic/268/7 "2020-07-16T08:52:17Z")

</div>

現在のルックアップのダイアログ表示では、固定ヘッダー表示になっており、旧デザインとはかなりDOM構造が変わったため、最初から見直したほうがいいと思います。

クラス名については、ブラウザーで調べてみてください。

参考 [kintone 開発で Chrome デベロッパーツールを使おう&nbsp;](https://qiita.com/rex0220/items/58122efda9f94f669ec4#dom-%E6%93%8D%E4%BD%9C)DOM操作

なお、ルックアップのダイアログ表示幅が広くなったので、あまり細かな調整は不要ではないでしょうか？

&nbsp;

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2202](https://avatars.discourse-cdn.com/v4/letter/l/85f322/32.png) [@Legacy\_Account2202](https://community.cybozu.dev/u/Legacy_Account2202)\
**Post date:** [2020 年 7 月 17 日午前 6:29 UTC](https://community.cybozu.dev/t/topic/268/8 "2020-07-17T06:29:49Z")

</div>

rex0220さま

早速のご回答誠にありがとうございます！

やはりDOMなのですね。。。

**＞ルックアップのダイアログ表示幅が広くなったので、あまり細かな調整は不要ではないでしょうか？**

はい、そもそもの要望が「広すぎるから狭くして」というものですので、贅沢な要望です。  
kintoneのバージョンアップで動作しなくなるリスクを冒してまですることではありませんね。  
今回はいじらないことにします。

またDOMの方はこれはこれで勉強したいと思います。

ご教授どうもありがとうございました。  
今後ともよろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/d5c841c3c5a6cb66eed514001c1b45147c9e1f4f.png) [@system](https://community.cybozu.dev/u/system)\
**Post date:** [2025 年 8 月 28 日午前 4:56 UTC](https://community.cybozu.dev/t/topic/268/9 "2025-08-28T04:56:19Z")

</div>

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。