RailsアプリにMaterial Design for Bootstrap 5を導入 しましたが、チェックボックスが左にズレる事に気付いたので対応しました。

現象

解りやすいように赤い線を引きましたが、左にズレています。
文字までの間は少し広いので、チェックボックスだけのようです。

CSS確認

ブラウザのディベロッパーツールで確認。

赤丸の項目を無効にすると、青丸の項目が有効になり、揃う。

対応

mdb.min.css自体を変更するのは避けたいので、優先されるCSSを記載する事にしました。

app/assets/stylesheets/application.css に追加

/* Tips: MDB5 3.1.0 バグ対応 */
.form-check .form-check-input {
    margin-left: -1.5em !important;
}

追記:ラジオボタンも解消する為に「!important」を追加しました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です