Garoonカスタマイズ　Boot

Garoon カスタマイズ
1

■質問

HTMLポートレットにボタンを設置してBootStrapを適用するとボタンが崩れる…対象方法はありますでしょうか？

■HTML

<!-- CDN link –>
<!-- BootStrap –>
<link rel=“stylesheet” href=“https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css” integrity=“sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T” crossorigin=“anonymous”>

<!-- ボタン設置 –>
<!-- class=“btn btn-primary” –>
<button class=“btn btn-primary” onclick=“location.href=‘XXXXXXXXXX’”>Bootstrapボタン設置</button>

2

岡原徹さん

ボタンに height: auto; のスタイルをあてれば良さそうです。

ご存知かもですが、Garoon に調和するスタイルも公開されています。
https://developer.cybozu.io/hc/ja/articles/360001203486
お好みのデザインかはわかりませんが、Bootstrap とは違って微調整は必要ないのでオススメです。

3

ひよこさん

ありがとうございます。height: auto で無事に解決しました！

また、Garoon風UIのCSSについてもありがとうございます。

こちらについては、ワークフローのカスタマイズで以前JSでボタンを作成した際に

うまくCSSが適用できずに敬遠しておりました…

その時は以下の様になりました。こちらも解決先はご存知でしょうか？

■事象

■ソース

    /** 

     * ボタン追加関数

     * @param {object} event 

     */ 

    function addSendButton(event) { 

         // debug code

         console.log(BTN_ROOT);

        // JavaScriptカスタマイズ用の項目取得

        var space = garoon.workflow.request.getSpaceElement(BTN_ROOT); 

        // 「（JavaScriptカスタマイズ用項目）」がない、過去の申請の場合は抜ける 

        if (!space) { 

            return; 

        } 

        /**

         * ボタン定義

         */

        var button = document.createElement(‘input’); 

        button.setAttribute(‘type’, ‘button’); 

        button.setAttribute(‘id’, ‘btn_root’); 

        button.setAttribute(‘value’, ‘Garoon調のボタン配置’); 

        button.className = “button_main_grn_kit”;

        // button.setAttribute(“class”,“button_main_grn_kit”);

        

        space.appendChild(button); 

        var sendButton = document.getElementById(‘btn_root’); 

        /**

         * ボタンクリックイベント作成

         */

        sendButton.onclick = function() { 

                onclickSendButton(event); 

        }; 

        return; 

    } 

 

 

 

 

4

岡原徹さん

input 要素になっているのでスタイルがあたっていないのだと思います。
button 要素で試してみてください。

// var button = document.createElement('input'); 
var button = document.createElement('button');
5

ひよこさん

アドバイスで解決できました！

こちらもカスタマイズの選択肢と使います！

ありがとうございました。