カスタマイズボタンの位置調整について

kintone カスタマイズ
1

お世話になります。

はじめようKintone APIを参考にしながらボタンを作成しております。

https://developer.cybozu.io/hc/ja/articles/201767270-第2回-レコード一覧画面にボタンを置いてみよう-

 

kintone.app.getHeaderSpaceElement()を活用してボタンの配置をしたいのですが、ボタンの位置が左寄せになってしまいます。

右寄せにするにはどの様にしたら宜しいのでしょうか？

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

(function() {
“use strict”;
kintone.events.on(‘app.record.index.show’, function(event) {
if (document.getElementById(‘my_index_button’) !== null) {
return;
}

var myIndexButton = document.createElement(‘button’);
myIndexButton.id = ‘my_index_button’;
myIndexButton.innerText = ‘一覧のボタン’;
kintone.app.getHeaderSpaceElement().appendChild(myIndexButton);
});
})();

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

 

また、ヘッダーのスペースだけではなく、フッターのスペースにボタンを配置することは可能なのでしょうか？

 

どうぞ宜しくお願いします。

2

y.hasebeさん

こんにちは。

右寄せは、cssを使って可能です。

また、kintoneの標準APIでは、フッターを取得するイベントが無いのですが、DOM操作で可能ではあります。

＜JavaScript＞

(function() {

 "use strict";

 kintone.events.on('app.record.index.show', function(event) {

  if (document.getElementById('my_index_button') !== null) {
   return;
  }

  var myIndexButton = document.createElement('button');
  myIndexButton.id = 'my_index_button';
  myIndexButton.innerText = '一覧のボタン';
  kintone.app.getHeaderSpaceElement().appendChild(myIndexButton);


  if (document.getElementById('my_footer_button') !== null) {
   return;
  }

  var myFooterButton = document.createElement('button');
  myFooterButton.id = 'my_footer_button';
  myFooterButton.innerText = 'フッターのボタン';
  document.getElementsByClassName('contents-bottommenu-gaia')[0].appendChild(myFooterButton);

 });

})();

＜CSS＞

/* ヘッダースペース内を右寄せ */
.kintone-app-header-space {
 text-align: right;
}

/* フッタースペース内を右寄せ */
.contents-bottommenu-gaia {
 text-align: right;
}

 

3

koichi 様

お世話になっております。

ご教示いただき大変ありがとうございます。

フッターの中にもボタンを配置することができ、思っていたことができるようになりました。

 

また、いただいたCSSをアップしてみたのですがヘッダー部フッター部とも配置が変わりませんでした。

他のCSSを削除したり様々試してみたのですが何か方法はございますでしょうか。

 

どうぞ宜しくお願いいたします。

 

4

y.hasebe様

ご確認ありがとうございます。

上記のcssを適用すると、配置は下記画像のようになるはずなのですが、、

差し支えなければ、現在適用中のcssの中身を投稿いただけないでしょうか。

5

koichi 様

ご連絡いただきありがとうございます。

適用しているソースですが、koichi様からいただいたものを変更せずに使用している状態です。

[javascript]

(function() {

     “use strict”;   

     kintone.events.on(‘app.record.index.show’, function(event) {    

     if (document.getElementById(‘my_index_button’) !== null) {
     return;
     }

     var myIndexButton = document.createElement(‘button’);
     myIndexButton.id = ‘my_index_button’;
     myIndexButton.innerText = ‘一覧のボタン’;
     kintone.app.getHeaderSpaceElement().appendChild(myIndexButton);

     if (document.getElementById(‘my_footer_button’) !== null) {
     return;
     }
    
     var myFooterButton = document.createElement(‘button’);
     myFooterButton.id = ‘my_footer_button’;
     myFooterButton.innerText = ‘フッターのボタン’;
     document.getElementsByClassName(‘contents-bottommenu-gaia’)[0].appendChild(myFooterButton);
    
     });
    
    })();

[css]

/* ヘッダースペース内を右寄せ */
.kintone-app-header-space {
text-align: right;
}

/* フッタースペース内を右寄せ */
.contents-bottommenu-gaia {
text-align: right;
}

このjavascriptとcssをアップすると、ボタンは出るのですが右には寄らない状態になっております。

私のCSSの内容やアップのやり方が悪いのだとは思いますが…

宜しくお願いいたします。

6

y.hasebe様

添付ありがとうございます。

cssですが、「text-align: right;」の前に全角スペースが入っていないでしょうか。

半角スペースまたはTabに修正すれば解決しそうです。

7

koichi 様

お世話になっております。

ご指摘の通り全角スペースとなっておりました。

無事にボタンを右に寄せることができました。

あれこれ試していたのですが気がつきませんでした…

 

様々ご教示いただき大変ありがとうございました。

8

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