テーブルの行追加・削除ボタンの位置変更について

kintone カスタマイズ
1

複数テーブルがあるうち横長のテーブルのみ、行追加・削除ボタンが右のままだと操作性が悪いため、行追加・削除ボタンを左位置に持ってこようとしています。

これまでは問題なく使えていたCSSを新しく作成したアプリに組み込み、数値を変更しただけなのですが、レコードでテーブルとは無関係のところの値を変えたりすると、±ボタンごと頻繁に消えてしまいます。（レコードを一度保存して再編集すれば、表示されます。）

エラーは出ておらず、なにか別のjsファイルと競合しているのか、もしくは、Chrome画面を少し小さくして、別ウィンドウと並べながら操作しているときに現象が多くみられるので、なにか打開策があるのか…と原因が分かりません。

▼別アプリで問題なく使用できているCSS

@charset "UTF-8";
.subtable-gaia.subtable-5530370 th.subtable-operation-gaia, .subtable-gaia.subtable-5530370 td.subtable-operation-gaia {
  position: absolute;
  margin-left: -1720px;
  margin-top: 35px;
}

▼試してみたCSS

@charset "UTF-8";
.subtable-5530370 .subtable-operation-gaia {
  position: absolute;
  margin-left: -1620px;
  margin-top: 35px;
}

.subtable-6420460 .subtable-operation-gaia {
  display: none;
}

[].forEach.callでも試してみましたがやはり同じ状況になっています。
最新の記述方法または対応策を教えていただけますと幸いです。よろしくお願いいたします。

「いいね！」 1
2

image

margin-left: -400px
にした例です。

@mediaを使ったやり方やpositionの設定をするなどやり方はあるかも知れません。

3

@aaa さん
ご返信いただき、ありがとうございます。

希望の左位置にはCSSで設置できているかと思われます。
しかしながら、保存されたレコードを編集画面で編集していると、最初は希望位置に表示されているもののレコード編集中に＋－ボタンが気付いたら消えてしまい、一度消えると再度レコードを保存して再編集しないと＋－ボタンが表示されないという症状が頻発しています。

不勉強で申し訳ないのですが、「@mediaを使ったやり方」とは具体的にどういうことでしょうか。
positionをabsolute以外にする場合、何が適切でしょうか。

教えていただけますと幸いです。
よろしくお願いいたします。

4

メディアクエリーの使用 - CSS: カスケーディングスタイルシート | MDN

position - CSS: カスケーディングスタイルシート | MDN

しかしながら、保存されたレコードを編集画面で編集していると、最初は希望位置に表示されているもののレコード編集中に＋－ボタンが気付いたら消えてしまい、一度消えると再度レコードを保存して再編集しないと＋－ボタンが表示されないという症状が頻発しています。

CSSの書き方よりも、他の何かが競合しているような気がします。

もし私だったら
このCSSだけを設定したアプリをつくって、再現するかチェックすると思います。

「いいね！」 1
5

参考ページをご紹介くださり、ありがとうございます。
メディアクエリを利用したことがないため、勉強してみます。

元々別アプリで実装済みのCSSの流用（px値のみ変更）でしたが、前述のような症状が見られたので、試行錯誤していました。
別アプリの構成もほぼ一緒でしたが、見たことのない症状なので、少し手入れした際の微妙な違いでなにか競合している可能性がやはり高そうですね…。

「いいね！」 1
6

こちらでは再現できないので、わからないのですが
DOMの変更でブレイクポイントを置いておいて検知することもできるようです。

image
image1169×448 40.3 KB

デベロッパーツールの要素で当該要素を選択して右クリック
とりあえずサブツリーの変更に設定して再現できないか？を試してみる方法もあるようです。

「いいね！」 2
7

@shi.K さん

横やり失礼します。
こんにちは、恐らくですがされたいことを見てると自社で以前したことと全く一緒だと感じたので、cssのコードを共有いたしますね！
ちなみにこちらのコードですが、すべてのテーブルに適応されてしまうのと、今後のアップデートで動かなくなる可能性があるのでそちらは悪しからず…

.subtable-gaia.edit-subtable-gaia{
	margin-left:64px;
}
.subtable-gaia.edit-subtable-gaia > tbody > tr{
	position:relative;
}
.subtable-gaia.edit-subtable-gaia > tbody > tr > td.subtable-operation-gaia{
	position:absolute;
	left:-64px;
	top:0;
}
.subtable-gaia.edit-subtable-gaia > tbody > tr > td.subtable-operation-gaia .add-row-image-gaia{
	margin-left:0 !important;
}
.subtable-gaia.edit-subtable-gaia > tbody > tr > td.subtable-operation-gaia .remove-row-image-gaia{
	margin-right:12px;
}
「いいね！」 2
8

@y_minamitani9534 さん
コードをご共有いただき、ありがとうございます。

弊社の場合は、行追加・削除ボタン位置がフィールドに載っていても問題ないのと、テーブルを指定して動作させたかったので、少し変更させていただきましたが、よくわからない症状が出ることもなく、動作させることができました。

コードが正しく書けなかったので、違うのかもと断念したのですが、テーブル自体のpositionを決めて、テーブルに対してpositionすれば、ブラウザの表示画面サイズが変わろうとも対応できるという考えも浮かんでいたので、答え合わせもできたようでうれしいです。

差し支えなければ、後学のために教えていただきたいのですが、下記コード部分について、td.subtable-operation-gaiaの部分までで事が足りるようにも感じるのですが、なぜ必要なのでしょうか？

.subtable-gaia.edit-subtable-gaia > tbody > tr > td.subtable-operation-gaia .add-row-image-gaia{
	margin-left:0 !important;
}
.subtable-gaia.edit-subtable-gaia > tbody > tr > td.subtable-operation-gaia .remove-row-image-gaia{
	margin-right:12px;
}
9

@shi.K さん

返信遅れてしまい申し訳ないです。
無事問題解決できたようでよかったです :v:

td.subtable-operation-gaia の部分までで事が足りるようにも感じるのですが、なぜ必要なのでしょうか？

ここは単純に + ボタンと - ボタンを横並びにしたときに 隙間が相対的に12px開いてほしいと考えたからですね :sweat_drops:

寧ろ、

.subtable-gaia.edit-subtable-gaia > tbody > tr > .add-row-image-gaia{
	margin-left:0 !important;
}
.subtable-gaia.edit-subtable-gaia > tbody > tr > .remove-row-image-gaia{
	margin-right:12px;
}

でもいいですね。html要素からコピペでしてたのでこのような形になってました。

10

@y_minamitani9534 さん
隙間調整のため、とのことだったんですね。
ご回答いただき、ありがとうございました！

@aaa さん
お忙しいところお付き合いくださり、ありがとうございました！
まだまだ勉強不足だと痛感しましたので、
リンク先を少しずつでも理解できるようにしてまいります。

「いいね！」 1
11

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。