画面右上に、単一のフィールドを固定表示させたいです。
次の投稿が、最も近いイメージです。
しかし、このコードでは、そのフィールドが所属する行ごと固定表示されてしまいます。
私が実現したいことは、次の画像の通り、<div class="layout-gaia showlayout-gaia">～</div> 内の右上に単一のフィールドを固定表示することです。 (固定表示とは、ページをスクロールしても、常に同じ場所に表示されるという意味です)
これを実現するための方法について、ご教示いただけませんでしょうか。
@Koy さん
こんにちは、気になったので回答してみました。
参考にされているコードの中で、
let fieldElement = document.getElementsByClassName('field-' + stickyField)[0];
let parentRow = fieldElement.parentNode;
という風に書かれていますが、
let parentRow = fieldElement.parentNode
で取得されたフィールドのDOM要素の親要素（行の要素）を指定しています。
行として取得された、parentRow に対してDOM操作を行っているため行ごと固定されてしまいます。
ただ少し検証してみましたが、行のさらに親要素を指定してDOM要素を移動させて
fieldElement.style.position = 'sticky';
fieldElement.style.top = '130px';
fieldElement.style.right = '0px';
と指定しても、右固定で表示されなかったので何かしら制限がかけられているのだと思われます。
そのため、以下のようにすれば @Koy さんが思ってることを近しいことができるのではないかと思われます。
fieldElement.style.position = 'fixed';
fieldElement.style.top = '130px';
fieldElement.style.right = '0px';
こちらですと要素に対して固定ではなくて、表示されている画面に対して要素を固定します。
一例に取りますと、レコードのコメント欄のDOMも.style.position = ‘fixed’;を使われております。
ただ、可変的にtopの値が変わるので、JSのscrollイベントでブラウザのスクロールバーを動かすとtopが可変的に変化するように制御しているかと思われます。
ご回答くださり、ありがとうございます。
ご教示いただいた情報をもとに試行錯誤したところ、私にとっての最適なコードにたどり着けました!
(function() {
'use strict';
let stickyField = '1234'; //フィールドに割当てられた番号
kintone.events.on([
'app.record.detail.show', 'app.record.create.show', 'app.record.edit.show'
], (event) => {
let fieldElement = document.getElementsByClassName('field-' + stickyField)[0];
fieldElement.style.position = 'fixed';
fieldElement.style.bottom = '-4px';
fieldElement.style.right = '-8px';
fieldElement.style.zIndex = '10';
fieldElement.style.backgroundColor = '#F5F5F5';
return event;
});
})();
ユース･ケースとしては、画面右下に帳票を常時表示し、その表示内容をkintoneアプリ上のフィールド
(画面左側) に入力していくというものです。
(私が利用したプラグインでは、レコードの閲覧時にのみ、プレビューされます。レコードの編集時にはプレビューされないのですが、この点については本件とは別に試行錯誤します)
そのうえで、もう一点ご質問させていただきたく……!
この方法だと、同グループ内の情報量が多すぎるとき、プレビュー結果が見切れてしまいます。
これを防ぐため、グループ内の情報量が多すぎるときは、画面に見切れるのではなく、グループの大きさは固定とし、その内部にスクロール･バーを表示させたいのです。
JavaScriptの編集により、そのようなことは実現できるでしょうか……?
@Koy さん
こんにちは、スクロールバーでしたら以下のURLを参考にしてみるのがいいかなと思われます。
スクロールバーを表示されるためには、固定のheightとwidthが必要なようですね！
恐らくこのような形になるかと思われます。
fieldElement.style.height = (document.documentElement.clientHeight - 400) + 'px';
fieldElement.style.width = (window.innerWidth / 3) + 'px';
fieldElement.style.overflow = 'scroll';
//↓グループの折りたたみ時のイベント
fieldElement.children[0].addEventListener("click",() => {
//↓ariaExpanded パラメータで開閉しているか把握
if (fieldElement.children[0].ariaExpanded == "true"){
fieldElement.style.height = (document.documentElement.clientHeight - 400) + 'px';
fieldElement.style.width = (window.innerWidth / 3) + 'px';
fieldElement.style.overflow = 'scroll';
} else {
fieldElement.style.height = 'auto';
fieldElement.style.width = 'auto';
}
});
サンプルとしては、表示範囲heightが上から-400px widthがwindowの3分の１にしています。
グループの折りたたみイベントを設定しなければ、高さ幅が固定のためグループを閉じても固定されっぱなしなので、グループの開閉イベントを追加しています。
恐らくこちらでされたい事に近しいのかなと考えております…
また、レコード新規・編集画面では、添付ファイルのfilekeyはeventevent変数には入ってこないので、色々と工夫する必要がありそうですね…
ありがとうございます!
まさに、想定通りの動作を実現できました。
宿題については、引続き試行錯誤してみます
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。