【1】ツールチップやポップオーバーが表示されない
* 以下の関連記事の「Bootstrap 4 で ツールチップやポップオーバーが表示されない」と同件。https://blogs.yahoo.co.jp/dk521123/37655508.html
【2】フローティングラベルが動かない
フローティングラベルが実装できなかった 表示されているサンプル(https://mdbootstrap.com/previews/free-templates/admin/dashboard.html)と の差異を調べてみると、ロードする際に、Firefoxの場合「e is null」っとなり、 Nullポインタ例外が発生していた【例外箇所抜粋】
Waves.init = function(options) { var body = document.body; options = options || {}; // ... 略 ... // body が nullだったのでエラーになっていた body.addEventListener('mousedown', showEffect, false); };https://github.com/mdbootstrap/bootstrap-material-design/issues/31
https://github.com/mdbootstrap/bootstrap-material-design/issues/49
より抜粋 ~~~~~~~ I marked this as a bug and added to our TODO list ~~~~~~~ どうも、バグっぽい。
解析
以下のように、nullポインタを発生させなかったところ、 フローティングラベルが表示され、動いている暫定対処 (現象発生せず)
if (!body) { console.log("[Info] add mousedown Event"); body.addEventListener('mousedown', showEffect, false); } else { console.log("[Warn] body is null..."); }
対応案
https://mdbootstrap.com/support/js-loading-issue/で ~~~~~~~ document.body is null, thatswhy the waves method throws an exception (and mouse over waves effects do not work..)… But I am the only one who gets this error? My *.js files are loaded in html head, ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ of course, but obviously the method is called prior the DOM has a body element. Maybe I should put the script tags into END OF body, ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~ との記載を発見。 確かに、現象が発生しているコンテンツを確認したところ、 【修正前】のように、headタグ内にあった。【修正前】
<html> <head> ... <script src="/libs/js/jquery-3.2.1.js" type="text/javascript"></script> <script src="/libs/js/popper.js" type="text/javascript"></script> <script src="/libs/js/bootstrap.js" type="text/javascript"></script> <script src="/libs/js/mdb.js" type="text/javascript"></script> </head> <body> ... </body> </html>【修正後】
<html> <head> ... <script src="/libs/js/jquery-3.2.1.js" type="text/javascript"></script> <script src="/libs/js/popper.js" type="text/javascript"></script> <script src="/libs/js/bootstrap.js" type="text/javascript"></script> </head> <body> ... <!-- ★ </BODY>内にmdb.jsを移動 ★ --> <script src="/libs/js/mdb.js" type="text/javascript"></script> </body> </html>
【3】グループボタンが思った通りな値が取れない
* 以下「現象発生したコンテンツ」で、サイトを作ったが、 onChangeイベントでチェックされたかどうかを判定したのだが 思った値が取得出来ない
現象発生したコンテンツ
<div class="btn-group" data-toggle="buttons"> <label class="btn btn-mdb-color form-check-label active"> <input class="form-check-input" type="checkbox" autocomplete="off"> Japanese </label> <label class="btn btn-mdb-color form-check-label" active> <input class="form-check-input" type="checkbox" autocomplete="off"> English </label> <label class="btn btn-mdb-color form-check-label" active> <input class="form-check-input" type="checkbox" autocomplete="off"> Franch </label> </div>
原因
下らないことだが...* 以下のように「active」と「checked」を同期させてなかった => これができてなくて、はまってしまった... ~~~~~~~~~~ <label class="btn btn-mdb-color form-check-label active"> <!-- <= 'active'を付加 --> <input class="form-check-input" type="checkbox" autocomplete="off" checked> Pre-checked <!-- <= 'checked'を付加 --> </label> ~~~~~~~~~~以下のサンプルも、「active」と「checked」を同期している
https://mdbootstrap.com/components/bootstrap-button-group/