フォームブリッジで、kViewerルックアップの検索テキストボックス（サブテーブル内も含む）を非表示にしたいと思います。
何も指定せずに検索するためなので、虫眼鏡アイコンだけの表示にしたいのです。
このサイトで検索してみたところ、多くの投稿が見つかりましたが、いずれも古い情報なのか、どれもうまく動作しませんでした。（cssで非表示にする方法）
たとえば、このような css を試してみました。
[data-vv-name="kviewer\_lookup"] \> form .el-input {
display:none;
}
バージョンアップ等で変更になっていますでしょうか？
その後、調べていたらヘルプサイトにこんな記述がありました。
個別フィールドのスタイルの変更は、CSSではなくJavaScriptで行って下さい。
CSSではなくJavascript でKviewer の検索フィールドを消す方法をご存じの方、情報提供をお願いします。
フォームブリッジには詳しくないので、間違っているかもしれませんが……
今年の初めにフォームブリッジがバージョンアップし、要素の構成などが変更になりました。もしかしたらそれの影響かもしれないので、一度新しいマニュアルを見ながらやってみると良いかもしれません。
コメントありがとうございます。
お教えいただいたサイトは JavaScript の説明のみで、css についての情報が無いようです。
JavaScript は新バージョンで作ってみて動作していますが、目的のKVewerルックアップのテキストフィールドを消す方法が見つけられません。
ここ に CSS のクラスについては記載があります。
ルックアップフィールドに特定のクラスが割当たっているというよりかは、ほかのフィールドと同様にクラスが設定されているようなので、その中からルックアップフィールドを探し出すような組み方をすればよいと思います。
情報ありがとうございます。
調べてみます！
お教えいただいた情報をもとに調べてみましたが、知識不足でわかりませんでした。
HTMLソース内を調べて、”KVIEWER_LOOKUP” というフィールドタイプがあることと、表示を消したい input フィールドの IDは判明しましたが、そのIDを指定して（＃を先頭につけたID）
display: none !important;
としても影響なしでした。
フィールドを丸ごと消すのではなくて、１つのフィールド内のテキスト入力欄だけを消す形なるので、ブラウザのDev Toolでdiv class="grow"を見つけて消してみました。今後のサイト側の仕様変更に影響されます。複数のkViewerルックアップがあったときなどは適宜調整してください。
formBridge.events.on('form.show', function(context) {
const el = document.querySelector('div.grow');
if (el) {
el.remove();
}
});
サブテーブルは、時間があれば試してみます。
ありがとうございます。
実際に試してみることができるのは、年明けになる予定ですが、真っ先に試してみたいとおもいます。（結果は報告します。）
formBridge.events.on('form.show', () => {
setTimeout(() => {
const elements = document.querySelectorAll('div.grow');
console.log('count:', elements.length);
for (const el of elements) {
el.remove();
}
console.log('count after:', document.querySelectorAll('div.grow').length);
}, 500);
});
サブテーブルを消すものです。
サブテーブルは画面が表示されたタイミングの少しあとに表示されるため500ms遅延を入れています。このタイミングは調整してください。
サブテーブル内の div class=growはサブテーブル内では表示されているものと表示されていない２つが存在するようです。今は見つけたすべての要素を削除しています。
サブテーブル内ではないふつうのkViewerルックアップとサブテーブル内のkViewerルックアップが両方あった場合、両方消えます。複数のkViewerルックアップがあって片方は残したい場合は、何番目の要素を残したいかを調整する必要があります。
追加情報ありがとうございます。
これも、年明け5日以降に試してみたいと思います。
サブテーブル内のエレメントは、行の追加で増えるため、行の追加時にも動くようにする必要がありそうですね。このあたりも試してみたいと思います。
ご教授いただいたJSを試してみました。
どちらのスクリプトも正常に動作しました。
課題は、サブテーブルは最初に表示さる1行目だけが対象となり、
＋ボタンで行を追加すると文字入力フィールドが出現します。（当然でしょうが）
画面表示のタイミングで実行するもののほかに、行が追加されたときに動作する
機能を組み込むと解決しそうです。
有益な情報ありがとうございました。
追伸：なお、トヨクモさんに、検索の入力フィールドの表示・非表示を
選択できる機能の追加を要望しております。
追加された行でも入力フィールドを消すように次のコードを書いて試しました。
// 行が追加されたときに起動する
formBridge.events.on('form.subtable.addRow.FieldCode', function (context) {
const elements = document.querySelectorAll('div.grow');
for (const el of elements) {
el.remove();
}
});
ところが、最初に追加した2行目が消えず、3行になると2行目が消えるという順に、最後に追加した行の入力フィールドは消せず、それ以前に追加された行の入力フィールドが消えるという現象です。スクリーンコピーは次のとおり。
もう少し調査してみますが、アドバイスがありましたらよろしくお願いします。
自己解決しました。
サブテーブルの行を追加後の処理にも遅延を入れてみたら、期待したとおりに
行が追加され、一瞬入力フィールドが表示されてから消えるようになりました。
おかげさまで期待したとおりの動作が実現しました。
ありがとうございます。
今更ですが
別解として、CSSでやる方法もあります。
サブテーブル内でも動くようです。
こちらもgrowというdiv要素に変更があると動作しなくなります。
div.grow {
display: none !important;
}
growというdiv要素に介入するより、正攻法としては、JavaScriptでフィールドコードでフィールドを丸ごと取得してinput要素を消してしまう、サブテーブル内は遅延を入れることになりそうです。
css だとたった3行でできてしまうのですね。
一瞬入力フィールドが表示されることもなく快適です。
正攻法ではないようですが、仕様変更されるまではこの方法でいきたいと思います。
追加情報ありがとうございました。
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。
