スペースフィールドでの表示位置

[futamu]

スペースフィールドに日付フィールドの日にちから今日までの経過日数を表示するプログラムを作成しました。

計算して表示することはできたのですが、文字が表示される位置が気に入りません。表示位置を添付画像の赤枠部分まで下げたいのですが可能でしょうか

以下が実行したプログラムです。

/*
 * 今日までの年数を計算する
 */
(() => {
  'use strict';
  // レコード詳細画面に適用
  kintone.events.on('app.record.detail.show', (event) => {
    const record = event.record;

    // 今日までの経過年月日を計算する関数
    const calculateDuration = function(dateStr) {
      // 今日
      const currentDate = luxon.DateTime.local().startOf('day');
      // 比較対象の日
      const date = luxon.DateTime.fromISO(dateStr).startOf('day');
      // 経過期間を計算する
      const duration = currentDate.diff(date, ['years', 'months', 'days']);
      return duration.toObject();
    }

    //比較するフィールドを取得
    const ADay = record['Years'].value;
    if (ADay) {
      // 計算する関数へ
      const ADayDuration = calculateDuration(ADay);
      // スペースに表示する内容
      const bbElement = document.createElement('div');
      if (ADayDuration.years == 0 && ADayDuration.months == 0) {
        bbElement.textContent = '  ' + ADayDuration.days + '日';
      } else {
        bbElement.textContent = '  ' + ADayDuration.years + '年' + ADayDuration.months + 'ヶ月';
      }
      // 表示するスペースを取得
      const element = kintone.app.record.getSpaceElement('Space_0');
      element.appendChild(bbElement);
    }
  return event;
  });
})();

[nazobito]

bbElement の position を relative にすると位置を調整できるので、
あとは、top で位置を微調整すれば、希望の位置に表示されると思います。

// スペースに表示する内容
const bbElement = document.createElement('div');
// 以下の 2行を追加する
bbElement.style.position = 'relative';
bbElement.style.top = '34px'; // ここで位置を調整する  

[futamu]

ご回答ありがとうございます。
無事希望の場所に表示することができました。
ありがとうございました。