レコードを印刷する際、特定の場所の余白（margin-bottom）を変更したい。

kintone カスタマイズ
1

「レコードを印刷」のボタンから印刷を行う際に、CSSで「row-gaia」というクラスの

margin-bottom の値（デフォルト：12px）を変更したいのですが、どうやっても上手くいきません。

 

下記を試しましたが、適用されず…。

ご教授のほど、どうぞよろしくお願い致します。

@media print {
   .row-gaia {
     padding: 0px;
     margin-bottom: 3px;
 }
}
2

追記失礼します。

JavaScriptで下記も試しましたが、動作しませんでした。

そもそも、カスタマイズ不可能な部分なのでしょうか？

kintone.events.on('app.record.print.show',(event)=>{

      const ChangeMargin = document.getElementsByClassName("row-gaia");

        ChangeMargin.style.marginBottom = '5px';
});
3

「@media」は印刷時のcssになるので、印刷プレビューを開けば正常に反映されていると思います。

kintone上の印刷用画面の装飾を変えるのであれば、

.body-record-print .row-gaia {
    padding: 0px;
    margin-bottom: 3px;
}

と印刷用画面内のrow-gaiaを指定すると良いでしょう。

 

また、JSについては「document.getElementsByClassName()」で取得するものはHTMLコレクション（配列風オブジェクト）になるので、ループが必要です。またあくまでも配列とは違うので、スプレッド構文またはArray.fromで配列に変換が必要です。

        const ChangeMargin = [...document.getElementsByClassName("row-gaia")];
// もしくはArray.from(document.getElementsByClassName("row-gaia"));

        ChangeMargin.forEach((row) => {
          row.style.marginBottom = '5px';
      });
「いいね！」 1
4

mls-hashimoto さん

お忙しいところ、ご回答ありがとうございます。

「@media」について理解が足りておらず、申し訳ありませんでした。

頂いたコードを試したところ、レコード印刷画面（プレビューの前）でも変更できた事を確認できました。

JSの「document.getElementsByClassName()」につきましても、ご教授ありがとうございます。

こちらも正常に動作することを確認できました。

大変助かりました！ありがとうございました！

 

 

5

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