お世話になります。
特定のビューでのみヘッダー部分を縦書きにするようにしたいと考えております。
他の方の記事で「Javascriptで指定したビューのときのみ、classを付与して
CSSにてそのclassを指定する」という方法を見つけ、実装を考えております。
下記のように処理を記述しておりますが、classの付与はできても指定がうまくいっていないようでデザインが変わらない状態です。
何か指定方法に問題があればご教示いただけますと幸いです。
【Javascript】
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
kintone.events.on(‘app.record.index.show’, function(event) {
if(event.viewId === 5520355){
var setClass = document.getElementById(‘view-list-data-gaia’);
setClass.classList.add(‘customize’);
}else{
return;
}
});
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
【CSS】
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
.customize recordlist-header-label-gaia{
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
.customize recordlist-header-cell-gaia{
text-align: center;
vertical-align: top;
}
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
recordlist-header-label-gaia、recordlist-header-cell-gaiaをそれぞれ.recordlist-header-label-gaia、.recordlist-header-cell-gaia(ピリオドを足してクラス指定)にすれば意図通りの動きになるかと思います。
FM様
ご回答頂きましてありがとうございます。
ご指摘頂いた箇所を修正し、以下のように書き換えましたが、画面にデザインが反映されません。
(付与したクラスを指定しない場合ですと、デザインは変わります。)
クラスを付与する先が誤っているのでしょうか。
お忙しいところ、恐れ入りますが、ご指導いただけますと幸いです。
【CSS】
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
.customize.recordlist-header-label-gaia{
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
.customize.recordlist-header-cell-gaia{
text-align: center;
vertical-align: top;
}
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
似たようなコードで試したところ、「.customize.recordlist-header-label-gaia」の、「.recordlist-header-label-gaia」の前に半角スペースが必要でした。
「.customize .recordlist-header-label-gaia{」となります。
FM様
早速のご返信ありがとうございます。
上記の指定方法にて理想の動作を実装できました。
クラスの指定は細かい部分にも注意が必要なのですね。
初歩的な質問にもかかわらず、
ご丁寧にご指導くださいましてありがとうございました！