新規投稿
フォローする

Garoonカスタマイズ　Boot

Avatar
岡原徹

■質問

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>

0

4件のコメント

Avatar
ひよこ

岡原徹さん

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

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

1
Avatar
岡原徹

ひよこさん

ありがとうございます。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; 
    } 

 

 

 

 

0
Avatar
ひよこ

岡原徹さん

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

// var button = document.createElement('input'); 
var button = document.createElement('button'); 
0
Avatar
岡原徹

ひよこさん

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

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

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

 

0
サインインしてコメントを残してください。