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

kintone カスタマイズ
1

現在、テーブルの追加・削除ボタンを下記の様に、左側に表示させているのですが、
テーブル内のフィールドが多い為、

左端・右端どちらにも、追加・削除ボタンを表示させるか、
スクロールの動きにあわせて、追加・削除ボタンが動くようにしたいと考えております。

何か良い方法があれば、ご教示願います。

※CSSファイル
.subtable-gaia tr {
  
  background : #FFFFFF;
}
  
.subtable-gaia tr:nth-child(even) {

  background: #CCCCCC;
}

※jsファイル
function subTableIDRtn(fieldCode) {
  var subTableObj = {};
  var subTableList = cybozu.data.page.SCHEMA_DATA.subTable;
  for(var i in subTableList) {
    if(subTableList[i].var == fieldCode) {
      var subTableObj = subTableList[i];
      break;
    }
  }
  return subTableObj ? subTableObj.id : undefined;
}

kintone.events.on(['app.record.create.change.テーブル', 'app.record.edit.change.テーブル'], function(event) {
var id = subTableIDRtn("テーブル");
  var subTableElement = $(".subtable-" + id).get(0);
  var subTableOpElements = subTableElement.getElementsByClassName("subtable-operation-gaia");
  [].forEach.call(subTableOpElements, function(button){
      button.style.position = 'absolute';
      button.style.marginLeft = adjustLeft;
      button.style.marginTop = '30px';
  });
  return event;
});

kintone.events.on(['app.record.create.show', 'app.record.edit.show'], function(event) {
var id = subTableIDRtn("テーブル");
  var subTableElement = $(".subtable-" + id).get(0);
  var subTableOpElements = subTableElement.getElementsByClassName("subtable-operation-gaia");
  adjustLeft = Math.floor(subTableElement.getBoundingClientRect().left - subTableOpElements.item(0).getBoundingClientRect().left) + 'px';
  [].forEach.call(subTableOpElements, function(button){
      button.style.position = 'absolute';
      button.style.marginLeft = adjustLeft;
      button.style.marginTop = '30px';
  });
  return event;
});
2

kintone_TS44さん

こんにちは。

日数が経っているので既に解決されているかもしれませんが、回答します。

 

positionをfixedに変えるとスクロールしても固定できます。

button.style.position ='fixed';
3

kintone_TS44さん

すみません。縦スクロールを考慮できていなかったです。

無理やりですが、横スクロール時にスクロール量を取得して、marginに足す形にしました。

 

let adjustLeft;

kintone.events.on(['app.record.create.change.テーブル', 'app.record.edit.change.テーブル'], function(event) {

const id = subTableIDRtn("テーブル");
const subTableElement = $(".subtable-" + id).get(0);
const subTableOpElements = subTableElement.getElementsByClassName("subtable-operation-gaia");
  const scroll_x = window.scrollX;

[].forEach.call(subTableOpElements, function(button) {
  button.style.position = 'absolute';
  button.style.marginLeft = (adjustLeft + scroll_x) + 'px';
  button.style.marginTop = '30px';
  });

window.addEventListener('scroll', function(event) {
  const scroll_x = window.scrollX;
  [].forEach.call(subTableOpElements, function(button) {
    button.style.position = 'absolute';
    button.style.marginLeft = (adjustLeft + scroll_x) + 'px';
    button.style.marginTop = '30px';
  });
  });

  return event;

});

kintone.events.on(['app.record.create.show', 'app.record.edit.show'], function(event) {

const id = subTableIDRtn("テーブル");
const subTableElement = $(".subtable-" + id).get(0);
const subTableOpElements = subTableElement.getElementsByClassName("subtable-operation-gaia");
adjustLeft = Math.floor(subTableElement.getBoundingClientRect().left - subTableOpElements.item(0).getBoundingClientRect().left);
  const scroll_x = window.scrollX;

[].forEach.call(subTableOpElements, function(button) {
  button.style.position = 'absolute';
  button.style.marginLeft = (adjustLeft + scroll_x) + 'px';
  button.style.marginTop = '30px';
  });

window.addEventListener('scroll', function(event) {
  const scroll_x = window.scrollX;
  [].forEach.call(subTableOpElements, function(button) {
    button.style.position = 'absolute';
    button.style.marginLeft = (adjustLeft + scroll_x) + 'px';
    button.style.marginTop = '30px';
  });
  });

  return event;

});

 

 

4

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