Railsがvalidationエラー時に自動挿入するfield_with_errorsとbootstrap4を共存させる

RailsではValidationエラーが発生した場合、validationエラーが発生したカラムのlabelとinput要素にfield_with_errorsクラスを付与したdiv要素で囲んでくれる仕組みがあります。
これはこれで非常に便利なのですが、bootstrapを使用している場合表示くずれが起こってしまいます。
↓の画像をご覧ください。

f:id:ihatov08:20191126003023p:plain

labelは細字かつ少し小さく、input要素は高さが低くなっています。

この表示崩れを修正しましょう。
bootstrap4です。
表示崩れを直しつつ、赤枠で囲んでvalidationエラーをわかりやすくします。

.field_with_errors {
input {
@extend .is-invalid;
}
}
.form-group {
.field_with_errors {
label {
font-size: 20px;
font-weight: 500;
}
input {
height: 50px;
}
}
}

その結果がこちらです↓

f:id:ihatov08:20191126003026p:plain

表示崩れが修正されました。

お困りの方の参考になれば幸いです

コメントを残す

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

CAPTCHA