プラグインのCSS設定をCSSカスタマイズで上書きする方法

kintone カスタマイズ
1

現在無料のガントチャートプラグイン（https://developer.cybozu.io/hc/ja/articles/203716110-%E3%82%AC%E3%83%B3%E3%83%88%E3%83%81%E3%83%A3%E3%83%BC%E3%83%88%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3）を利用しています。

一部スタイル変更のため、「設定」の「JavaScript / CSSでカスタマイズ」にCSSファイルを追加したのですが反映されませんでした。

chrome の DevToolsで確認した所、追加したCSSファイルの後に、ガントチャートプラグインが読み込まれているため、自作CSSの反映が上書きされてしまっていました。

（DevToolsでCSSファイルの読み込み順番をプラグインの後に移動にしたら反映されました）

 

そこで質問です

・「プラグインをカスタマイズする」以外の方法でプラグインのスタイルを変更する方法がありましたら教えて頂けないでしょうか。

・または「JavaScript / CSSでカスタマイズ」 で追加したCSSファイルの読み込み順番をプラグインの後に変更する方法は無いでしょうか。

よろしくお願いいたします。

 

追加したCSSファイルの記載内容はこれです。

.fn-gantt .leftPanel {
width: 300px;
}
2

あいうえお様

現状の対策としてはプラグインを変更しかないのかと思われます。

対策として記事に書いてあったので共有しておきます。タイミングが違ければ申し訳ございません。

悩まれている方がたくさんいると思います。

https://developer.cybozu.io/hc/ja/community/posts/206829766–%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%AE%E6%B5%81%E3%82%8C%E3%82%8B%E3%82%BF%E3%82%A4%E3%83%9F%E3%83%B3%E3%82%B0%E3%81%AF%E5%A4%89%E6%9B%B4%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84%E3%81%AE%E3%81%A7%E3%81%97%E3%82%87%E3%81%86%E3%81%8B- 

3

ishikawayuito 様

ご回答頂きありがとうございます。やはり無理なのですね。

URLのご提示もありがとうございます。時間がある時に試してみたいと思います。

大人の事情っぽく残念ではありますが、プラグインの変更を頑張ってみたいと思います。

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

4

あいうえお 様

こんにちは。

今回の内容でしたら、いちよう方法がないわけではないです。

サンプルを置いておきます。とりあえずの説明は省きますが、気になるようでしたらgoogle先生に聞いてみて下さい。

kintone.events.on('app.record.index.show', function(event) {
  let target = kintone.app.getHeaderSpaceElement();
    new MutationObserver(() => {
    let el = document.querySelector('.leftPanel');
    if (el) el.style.width = '300px';
  }).observe(target, { childList: true, subtree: true});
});
5

新屋 育男 様

こんにちは。お返事が遅くなり大変申し訳ありません。

 

MutationObserver で DOMの変更監視が出来るのですね。勉強になりました。

今回の事案では担当者のスキル的に使えないですが、便利なコードをご提示頂いありがとうございます。