お世話になっております。
サブテーブルに使用しておりますルックアップフィールドの幅が統一されず困っています。
下記はレコード追加画面で、行追加したのですが、1行目は幅が狭く、追加した行は幅が広いという状態になります。
レコード編集画面でも既存の行は狭く、追加した行は幅が広いです。
スタイルシートで幅は設定していませんが非表示設定しており、条件によって表示/非表示の切り替えをしています。
.recordlist-gaia.subtable-xxxxxxx th:nth-child(20),
.recordlist-gaia.subtable-xxxxxxx td:nth-child(20),
.subtable-gaia.subtable-xxxxxxx th:nth-child(20),
.subtable-gaia.subtable-xxxxxxx td:nth-child(20){
display:none;
}
表示する際はclassList.addで項目を追加していますが、スタイルシートから上記の記述を削除すると問題ないので、ここの部分が原因だと思いますが、改善する方法はありませんでしょうか。
よろしくお願いいたします。
古田さん
表示処理の詳細が不明ですが、DOM操作で、単純に非表示だったものを表示させた場合、
スタイルが崩れてしまい、同じような画面になりました。
DOMの情報を確認したところ、再表示した要素に関しては、以下のようになってしまい
縦横幅のサイズが指定されていない状況でした。
<div class=“input-text-outer-cybozu” style=“box-sizing: border-box; width: 0px; height: 0px;”>
DOMで操作をしているので、このあたりは自身で配置しているフィールドサイズなどに合わせて、
調整するしかないのだと思いますが、手元では、input-text-outer-cybozu の style からそれぞれの
サイズを指定することで、元のサイズに戻すことができました。
開発者ツールなどで、2行目の要素のサイズを確認して、表示時にサイズ指定することで解消されないでしょうか？
サクラエビさん
お世話になっております。
サイズが指定されていないのは気づきませんでした。
どうもありがとうございました。
表示時にサイズ指定するというのはイベントで行うのでしょうか？
CSSで幅を指定しても変わらなかったので・・・。
あと、ルックアップ項目の全体の幅ではなく入力フィールドの幅を指定する必要があるのでしょうか？
全体的によくわかっていなくて申し訳ありませんが、よろしくお願いいたします。
古川さん
サイズ指定に関しては、再表示処理の内容にもよる可能性があるので、あくまで参考程度ですが、
再表示処理後に、下記のような処理を行うことで、サイズを戻せました。(指定しているサイズは適当です。)
var lookup = document.getElementsByClassName("input-text-outer-cybozu");
lookup[0].style.width = "100px"
lookup[0].style.height = "40px"
また、ルックアップ自体の幅と、入力スペースの幅はそれぞれのクラスで値を持っているようなので、
上記のように生成されている入力領域のサイズを調整する必要があるようです。
なお、ガイドラインなどにも記述があるので、認識されているかもしれないですが、DOM操作に関しては、公式で非推奨としている方法です。
アップデートなどで動かなくなる可能性もあり、なんらかの変更があった場合には、自力での修正が必要となります。
なので、処理を行うにあたり、どの要素を操作しているのかなどは、ある程度把握した上で、カスタマイズを行う方がよいかと思います。
また、kintoneのカスタマイズでは、DOMで操作せざるを得ないこともよくありますが、フィールドの非表示などであれば、
アクセス権を奪うことでも表示されないので、可能なのであれば、アクセス権で制御する方が無難です。
サクラエビさん
お世話になっております。
ご丁寧にどうもありがとうございました。
上手くいきました！
kintoneのカスタマイズはフィールドのアクセス権もそうですが、サブテーブルは対象外となっているAPIが多く、やりたいことが実現出来なかったりするのが悩ましいです。
DOM操作については経験が浅いこともあり、勉強になるのでとてもありがたいです。
とりあえず、サブテーブル内のフィールドを非表示にするAPIが搭載されるまではこの方法でいきたいと思います。
どうもありがとうございました。
古川さん
上手くいったようでよかったです！
アクセス権に関しては、今回は対象がテーブル内のフィールドでしたね。
テーブル内の処理をしているのに、完全に忘れていました・・・失礼しました。
API は地味に手が届かない部分がちらほらあるので、今後に期待ですね。