kintone UI Component v1.12.0 のDropdownの幅

kintone カスタマイズ
1

kintone UI Component v1.12.0 のDropdownの幅を変更したい

過去履歴から、CSS使用して幅を変更する投稿がありましたが、

kintone UI Component v1.12.0で、この方法を試しましたが、うまくできませんでした。
CSS以外に方法がありますか

<index.js>
        const space = kintone.app.record.getSpaceElement('activity_type_space');
        const Kuc = Kucs['1.12.0'];

        const dropdown = new Kuc.Dropdown({
            label: '活動分類',
            requiredIcon: false,
            items: [{
                    label: '顧客訪問（リアル/オンライン）',
                    value: '顧客訪問（リアル/オンライン）'
                },
                {
                    label: '顧客とのやり取り',
                    value: '顧客とのやり取り',
                }
            ],
            className: 'options-class',
            id: 'options-id',
            width: 'auto',
            visible: true,
            disabled: false
        });

<index.css>
.kuc-dropdown-selected {
    width: 600px;
}

.kuc-dropdown-selected-label {
    width: calc(100% - 25px);
}
2

UI Componentのスタイルを変更するには、オフィシャルには、 Custom CSSを利用する必要がありますね

ドロップダウンでは下記のスタイルが変更できるようです。
今後のアップデートも考えると、スタイルの変更はまずは公式でカスタムできる範囲で検討するのがいいかと思います

--kuc-dropdown-font-size
--kuc-dropdown-toggle-width
--kuc-dropdown-toggle-height
--kuc-dropdown-toggle-color
--kuc-dropdown-menu-color
--kuc-dropdown-menu-color-selected
3

ありがとうございました。

4

CSSセレクタで「–kuc-dropdown-toggle-width」の指定方法をお教えていただけますでしょうか。

5

こちらのように、下記のように記載しcssファイルとしてアップすればよいかと思います

  #options-id {
    --kuc-dropdown-toggle-width: 16px;
  }
「いいね！」 1
6

ありがとうございました。

7

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