インライン編集時　数値フィールドの列幅を調整したい

kintone カスタマイズ
1

いつもお世話になっております。

背景・実現したいこと

インライン編集のフィールドの幅を調整したいです。

一覧画面の列幅の設定機能を使用し、下図のように売上数量の列幅を変えました。

インライン編集時列幅は変わり、下図のようになります。

調整を図る為、ソースコードを入れました。そしたら図２のように数値フィールドの数値が見えなくなります。

どうしたら数値の表示が変わらないと同時に、列幅を減らすことができますでしょうか。

ご教授いただければ助かります。

宜しくお願い致します。

エラー情報 （開発者ツールのコンソール）

 なし

利用したソースコード

一覧画面で編集する時にカラム幅が広がる問題 – cybozu developer network に参考しました。

 

(function() {
  "use strict";
  var widths;
  kintone.events.on('app.record.index.show', function(event){
    widths = [].map.call(document.getElementsByClassName('recordlist-header-cell-gaia'), function(th){
      return th.style.width;
    });
  });
  kintone.events.on([
    'app.record.index.edit.show',
    'app.record.index.edit.submit.success',
  ], function(event){
    setTimeout(function(){
      [].forEach.call(document.getElementsByClassName('recordlist-header-cell-gaia'), function(th, index){
        return th.style.width = widths[index];
      });
    }, 100);
  });
})();
2

wuさん

お世話になっております。

追加で、CSSでinput要素の幅を指定すればよいかと思います。

.gaia-ui-decimal-input,
.gaia-ui-decimal-input-input,
.recordlist-forms-number-gaia {
display: block;
max-width: 100%;
}

参考リンクでは明記していなかったのですが、このカスタマイズはkintoneのバージョンアップにより動作しなくなる可能性があるので、予めご了承ください。

3

江田様

いつもお世話になります。

調整できました。ありがとうございました。