背景・実現したいこと
・レコード一覧画面のカスタマイズボタン、複数個横並び且つ2行にしたい
例)【ボタン1】
【ボタン2】【ボタン3】
利用したソースコード
上記を参考に試したものがこちらです。
●css●
.button_pyramid {
text-align: left; /* 位置変更 */
}
●javascript●
(function() {
kintone.events.on('app.record.index.show', function(event) {
// 増殖バグを防ぐ
if (document.getElementById('my_index_button1') !== null) {
return;
}
// ボタンを配置するスペース
var el = kintone.app.getHeaderSpaceElement();
// スペースに作成したボタンを追加
el.innerHTML = '<div class="button_pyramid"><button id=\'my_index_button1\'>テスト1</button></div><div class="button_pyramid"><button id=\'my_index_button2\'>テスト2</button><button id=\'my_index_button3\'>テスト3</button></div>'
});
})()
希望の並びにはなりましたがコードが読みづらく、また、ボタンのデザインも変えたいので次は下記を試しました。
●css●
/* 基本設定 */
.button-class {
display: inline-block;
background-color: #f7f9fa; /* 背景色 */
border: solid 1px #e3e7e8; /* 枠線 */
color: #3498db; /* 文字色 */
width: 120px; /* 幅指定 */
text-align: center; /* 位置 */
cursor: pointer; /* カーソル */
padding: 8px; /* 内側余白 */
margin: 6px 0px; /* 外側余白 */
}
/* マウスオーバー時 */
.button-class:hover {
color : #FFFFFF; /* 背景色 */
background : #3498db; /* 文字色 */
}
.button_pyramid {
text-align: left; /* 位置変更 */
}
●jacascript●
(function() {
//ボタン作成関数を定義
function createBtn(id, cls, txt) {
var btn = document.createElement('button');
btn.id = id;
btn.className = cls;
btn.innerHTML = txt;
return btn;
}
kintone.events.on('app.record.index.show', function(event) {
// 増殖バグを防ぐ
if (document.getElementById('my_index_button1') !== null) {
return;
}
//ボタンに付与するCSSクラス名
var btnClassName = 'button-class';
// ボタン
var test1_Button = createBtn('my_index_button1', btnClassName, 'テスト1');
var test2_Button = createBtn('my_index_button2', btnClassName, 'テスト2');
var test3_Button = createBtn('my_index_button3', btnClassName, 'テスト3');
// ボタンを配置するスペース
var el = kintone.app.getHeaderSpaceElement();
// スペースに作成したボタンを追加
el.appendChild(test1_Button);
el.appendChild(test2_Button);
el.appendChild(test3_Button);
test1_Button.onclick = function(){
window.location.href ="#"
}
test2_Button.onclick = function(){
window.location.href ="#"
}
test3_Button.onclick = function(){
window.location.href ="#"
}
});
})();
こちらだと横並びは叶いますが、2行にする方法が分からず行き詰まってしまいました・・・。
お手数をおかけしますが、2行にする方法をご教示いただけませんでしょうか。
よろしくお願いいたします。