概要

MDB5でformのinputでborderが出ない時にborderを出す備忘録

対象

MDB公式（Material Design for Bootstrap v5）
https://mdbootstrap.com/

問題

公式サイトの通りにInputフィールドを下記だけ入れるとinputのborderが消える

<div class="form-outline">
  <input type="text" id="form12" class="form-control" />
  <label class="form-label" for="form12">Example label</label>
</div>

期待するもの↓

実際になるもの↓

対応

実は公式のInputの一番下に書いてあった
動的要素やサイズ変更があれば、下記スクリプトを実行する

document.querySelectorAll('.form-outline').forEach((formOutline) => {
  new mdb.Input(formOutline).update();
});

参照：
https://mdbootstrap.com/docs/standard/forms/input-fields/#section-dynamic-input-initialization