ルックアップを取得して表示される一覧の列幅を変更したい。

kintone カスタマイズ
1

ルックアップを取得して表示される「コピー元のレコードの選択時に表示するフィールド」の一覧表の項目の列幅を変更したくCSSを見よう見まねで作成してみましたがうまくいかず、ご教示いただけないでしょうか。

 

.lookup-selector-gaia.lookup-table-gaia th.lookup-cell-gaia { width: 80px;} /* 選択ボタン */
.lookup-selector-gaia.lookup-table-gaia th.label-5531898 { width: 80px;} /* 1列目 */
.lookup-selector-gaia.lookup-table-gaia th.label-5531912 { width: 80px;} /* 2列目 */
.lookup-selector-gaia.lookup-table-gaia th.label-5531913 { width: 80px;} /* 3列目 */
.lookup-selector-gaia.lookup-table-gaia th.label-5531914 { width: 300px;} /* 4列目 */
.lookup-selector-gaia.lookup-table-gaia th.label-5531915 { width: 300px;} /* 5列目 */
.lookup-selector-gaia.lookup-table-gaia th.label-5531916 { width: 300px;} /* 6列目 */
.lookup-selector-gaia.lookup-table-gaia th.label-5531917 { width: 80px;} /* 7列目 */
2

widthを変更する場合、!importantが必要みたいです。

{ width: 80px !important;}

 

3

mata様

ありがとうございます。
以下のように変更してみましたが、ダメでした。
要素の指定が間違っているのでしょうか？

.lookup-selector-gaia.lookup-table-gaia th.lookup-cell-gaia { width: 80px !important;} /* 選択ボタン */
.lookup-selector-gaia.lookup-table-gaia th.label-5531898 { width: 80px !important;} /* 1列目 */
.lookup-selector-gaia.lookup-table-gaia th.label-5531912 { width: 80px !important;} /* 2列目 */
.lookup-selector-gaia.lookup-table-gaia th.label-5531913 { width: 80px !important;} /* 3列目 */
.lookup-selector-gaia.lookup-table-gaia th.label-5531914 { width: 300px !important;} /* 4列目 */
.lookup-selector-gaia.lookup-table-gaia th.label-5531915 { width: 300px !important;} /* 5列目 */
.lookup-selector-gaia.lookup-table-gaia th.label-5531916 { width: 300px !important;} /* 6列目 */
.lookup-selector-gaia.lookup-table-gaia th.label-5531917 { width: 80px !important;} /* 7列目 */

 

4

thのクラス名を直接指定すると変更できると思います。

.recordlist-header-cell-gaia.label-5531898.recordlist-header-sortable-gaia { width: 80px !important; }

但し、以下の様にth配下のdivのwidthを変更しないと上手く列幅調整できませんでした。

.recordlist-header-cell-gaia.label-5531898.recordlist-header-sortable-gaia div:first-of-type { width: 100% !important; }

なお、データ部の列幅調整は、colgroup配下のcolのwidth変更で調整できると思います。

 

5

mata様
ありがとうございます！
返信が遅くなり申し訳ありません。

私の無い知識でこのようにやってみたところ、

.lookup-selector-gaia.lookup-table-gaia th.lookup-cell-gaia { width: 80px !important;} /* 選択ボタン */

.recordlist-header-cell-gaia.label-5531898.recordlist-header-sortable-gaia div:first-of-type { width: 100% !important; }

.recordlist-header-cell-gaia.label-5531898.recordlist-header-sortable-gaia { width: 80px !important; } /* 1列目 */

.recordlist-header-cell-gaia.label-5531912.recordlist-header-sortable-gaia div:first-of-type { width: 100% !important; }

.recordlist-header-cell-gaia.label-5531912.recordlist-header-sortable-gaia { width: 80px !important; } /* 2列目 */

.recordlist-header-cell-gaia.label-5531913.recordlist-header-sortable-gaia div:first-of-type { width: 100% !important; }

.recordlist-header-cell-gaia.label-5531913.recordlist-header-sortable-gaia { width: 80px !important; } /* 3列目 */

.recordlist-header-cell-gaia.label-5531914.recordlist-header-sortable-gaia div:first-of-type { width: 100% !important; }

.recordlist-header-cell-gaia.label-5531914.recordlist-header-sortable-gaia { width: 80px !important; } /* 4列目 */

.recordlist-header-cell-gaia.label-5531915.recordlist-header-sortable-gaia div:first-of-type { width: 100% !important; }

.recordlist-header-cell-gaia.label-5531915.recordlist-header-sortable-gaia { width: 300px !important; } /* 5列目 */

.recordlist-header-cell-gaia.label-5531916.recordlist-header-sortable-gaia div:first-of-type { width: 100% !important; }

.recordlist-header-cell-gaia.label-5531916.recordlist-header-sortable-gaia { width: 300px !important; } /* 6列目 */

.recordlist-header-cell-gaia.label-5531917.recordlist-header-sortable-gaia div:first-of-type { width: 100% !important; }

.recordlist-header-cell-gaia.label-5531917.recordlist-header-sortable-gaia { width: 80px !important; } /* 7列目 */

以下のようになってしまいました。

可能であれば、具体的なCSSコードを教えていただけますと幸いです。

6

mata様

その後、いろいろと調べてみて、mata様のおっしゃることが理解出来てきたのですが・・・

＞なお、データ部の列幅調整は、colgroup配下のcolのwidth変更で調整できると思います。

⇒こちらの具体的な方法が分からず、教えていただけないでしょうか。