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

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

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