【編集画面・詳細画面】ユーザー選択の幅を小さくしたい

[motti]

サブテーブルで承認者/主査/作成者をそれぞれユーザー選択するようにしたいのですが、3つ並べると、ほかのフィールドもあるので、横長になってしまい困っています…。

編集画面上と、詳細画面上でのユーザー選択枠の幅を小さくすることは可能なのでしょうか…？

※サブテーブルに限らずユーザー選択の表示幅を小さくする方法がありましたらご教示いただきたいです…！

ちなみに、下記のスレッドを参考に、プラグインを導入して運用してみています。（改行も見にくいのでできれば表示幅を小さくしたいです…）

サブテーブルを横スクロールせずに見たい - kintone カスタマイズ - cybozu developer community

JSコード初心者なので、AIチャットに聞きながらやってみましたが駄目でした…
知識の有る方、ご教示いただけますと幸いです…！よろしくお願いいたします

[fito12 (ふゆき)]

自分もカスタマイズの、ど素人なので．．．ﾁｮｯﾄ Gemini 君とお話してみました

kintoneのアップデートにより要素のクラス名が変更される可能性があるため、保守が必要になる点だけご留意ください。

と言われて結果、これです．．．

削除用のが1つ隠れてますね（＝左側のユーザー選択は削除できない）

どうしましょう？もう少しGemini 君と詰めてみますか？
イヤイヤ
要素のクラス名が変更された時の「保守」はできないからあきらめるのか？

一応、Gemini 君との対話リンク貼っておきます。（ちなみにですが、CSSｶｽﾀﾏｲｽﾞです）

---

独り言です
本当は「所属」ﾌｨｰﾙﾄﾞを1つ追加、4つ全てを「ﾄﾞﾛｯﾌﾟﾀﾞｳﾝ」ﾌｨｰﾙﾄﾞにして
Boost! Cascadeで入力補助ができれば、いいんだけどな～～
mottiさんの状況（ｱﾌﾟﾘ利用者数／組織構成／組織替えの頻度／その他諸々）が
わからないからな～～でも、組織替え時「ﾄﾞﾛｯﾌﾟﾀﾞｳﾝ」のメンテを考えたら、
クラス名の変更時のメンテの方が確率が少ないのかな～～
ん～～わからん

[motti]

ふゆきさん！神様…！ありがとうございます…！！！
Gemini君のリンクも大変助かりました！こう聞いて指示したらいいのかぁと勉強になりました

@fito12

mottiさんの状況（ｱﾌﾟﾘ利用者数／組織構成／組織替えの頻度／その他諸々）が
わからないからな～～でも、組織替え時「ﾄﾞﾛｯﾌﾟﾀﾞｳﾝ」のメンテを考えたら、
クラス名の変更時のメンテの方が確率が少ないのかな～～
ん～～わからん

そこまで大きい会社ではないので、直接入力で運用できそうです！
お心遣い感謝です

ふゆきさん✕Geminiくんの情報をもとに、私もGeminiくんに「ユーザー名ラベルの調整」と保守も考慮して、メモ多めでと聞いてみました！

▼CSSコード

/**
 * 【kintoneサブテーブル最適化設定】
 * * このCSSは、サブテーブル内の列幅を固定し、ユーザー選択フィールドの
 * 視認性を向上させるためのものです。
 * * アップデート等で表示が崩れた場合は、デベロッパーツール(F12)で
 * .subtable-gaia や .userselect-cybozu などのクラス名が変更されていないか
 * 確認してください。
 */

/* -----------------------------------------------------------
 * 1. 入力補助ボタンの非表示
 * -----------------------------------------------------------
 * ユーザー選択の「人型アイコン」や検索ボタンを消し、入力欄を広げます。
 * ボタンが必要な場合は、このセクションを削除してください。
 */
.subtable-row-gaia a.gaia-argoui-forms-userselect-picker,
.subtable-row-gaia a.entityselect-searchbox-search-icon {
    display: none !important;
}

/* -----------------------------------------------------------
 * 2. 特定列（6・7・8番目）の幅を150pxに固定
 * -----------------------------------------------------------
 * 全画面（追加・編集・詳細）で適用されます。
 * nth-child(n) の数字を変えることで、別の列を対象にできます。
 */
.subtable-gaia th:nth-child(6), .subtable-row-gaia td:nth-child(6),
.subtable-gaia th:nth-child(7), .subtable-row-gaia td:nth-child(7),
.subtable-gaia th:nth-child(8), .subtable-row-gaia td:nth-child(8) {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
}

/* -----------------------------------------------------------
 * 3. ユーザー選択フィールドの「外箱」の最適化
 * -----------------------------------------------------------
 * 複数人選択した際に、横に突き抜けず縦に自動改行されるようにします。
 * height: auto により、行が増えるたびに枠が縦に伸びます。
 */
.subtable-row-gaia .userselect-cybozu,
.subtable-row-gaia .entityselect-searchbox-cybozu,
.subtable-row-gaia .input-text-outer-cybozu {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important; /* 複数行表示を許可 */
}

/* -----------------------------------------------------------
 * 4. 入力枠（input）の最大化
 * -----------------------------------------------------------
 * ユーザー名を入力する前の白い枠を、列幅いっぱいに広げます。
 */
.subtable-row-gaia .input-text-cybozu {
    width: 100% !important;
    min-width: 0 !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    box-sizing: border-box !important;
}

/* -----------------------------------------------------------
 * 5. ユーザー名ラベルの省略表示（三点リーダー）
 * -----------------------------------------------------------
 * 150pxという狭い列幅でも名前が溢れないように制限します。
 */
.subtable-row-gaia .userselect-cybozu .entityitem {
    max-width: 140px !important; /* 列幅(150px)より少し小さめに設定 */
    overflow: hidden !important;
    white-space: nowrap !important;
    position: relative !important;
    padding-right: 20px !important; /* 削除ボタン用の余白 */
    display: inline-flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

/* ラベル内のテキスト部分：長すぎると「...」になる設定 */
.subtable-row-gaia .userselect-cybozu .entityitem button.entity-user-cybozu {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important; /* 三点リーダーを表示 */
    white-space: nowrap !important;
    text-align: left !important;
    padding-left: 22px !important; /* アイコン表示用の余白 */
    background-position: left center !important;
    background-size: 16px !important;
    display: block !important;
}

/* -----------------------------------------------------------
 * 6. 削除用「×」ボタンの右端固定
 * -----------------------------------------------------------
 * 名前が長くても短くても、常に右端の同じ位置にボタンを表示させます。
 */
.subtable-row-gaia .userselect-cybozu .entityitem .entity-list-item-delete-cybozu {
    position: absolute !important;
    right: 2px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 16px !important;
    height: 16px !important;
    background-color: #fff !important; /* 重なった時に背景を白くして見やすくする */
    border-radius: 50%;
}

小さい会社なので、保守は動かなくなったときに考えようと思います…笑
（これもまた勉強ですね…！）