RailsではValidationエラーが発生した場合、validationエラーが発生したカラムのlabelとinput要素にfield_with_errorsクラスを付与したdiv要素で囲んでくれる仕組みがあります。
これはこれで非常に便利なのですが、bootstrapを使用している場合表示くずれが起こってしまいます。
↓の画像をご覧ください。
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;
}
}
}
その結果がこちらです↓
表示崩れが修正されました。
お困りの方の参考になれば幸いです
コメントを残す