From 45d3a870281396311e33d655525eabe66bbba143 Mon Sep 17 00:00:00 2001
From: Saurabh Kumar <theskumar@users.noreply.github.com>
Date: Wed, 17 Apr 2024 21:58:29 +0800
Subject: [PATCH] Fix error message alignment for change password form (#3868)
Inline error messages
Fixes https://github.com/HyphaApp/hypha/issues/3842
---
hypha/apply/templates/forms/includes/field.html | 6 +++++-
hypha/apply/users/templates/users/change_password.html | 2 +-
hypha/static_src/sass/components/_form.scss | 1 +
3 files changed, 7 insertions(+), 2 deletions(-)
diff --git a/hypha/apply/templates/forms/includes/field.html b/hypha/apply/templates/forms/includes/field.html
index 704df164e..ea87eb025 100644
--- a/hypha/apply/templates/forms/includes/field.html
+++ b/hypha/apply/templates/forms/includes/field.html
@@ -56,7 +56,11 @@
{{ field }}
- {% if field.errors %}<h6 class="form__error-text">{{ field.errors.as_text|linebreaksbr }}</h6>{% endif %}
+ {% if field.errors %}
+ <p class="form__error-text">
+ {{ field.errors.as_text|linebreaksbr }}
+ </p>
+ {% endif %}
{% if widget_type == 'clearable_file_input' or widget_type == 'multi_file_input' %}
<output class="form__file-list"></output>
{% endif %}
diff --git a/hypha/apply/users/templates/users/change_password.html b/hypha/apply/users/templates/users/change_password.html
index aefff426f..821e42ea4 100644
--- a/hypha/apply/users/templates/users/change_password.html
+++ b/hypha/apply/users/templates/users/change_password.html
@@ -14,7 +14,7 @@
{% endadminbar %}
<div class="wrapper mt-6 max-w-2xl">
- <form class="form" action="" method="POST" novalidate>
+ <form class="form form--error-inline" action="" method="POST" novalidate>
{% if redirect_url %}
<input type="hidden" value="{{ redirect_url }}" name="next">
{% endif %}
diff --git a/hypha/static_src/sass/components/_form.scss b/hypha/static_src/sass/components/_form.scss
index abcac638e..34c002b5f 100644
--- a/hypha/static_src/sass/components/_form.scss
+++ b/hypha/static_src/sass/components/_form.scss
@@ -35,6 +35,7 @@
&--error-inline {
// stylelint-disable-next-line selector-class-pattern
.form__error-text {
+ padding-left: 0.5rem;
position: relative;
max-width: 100%;
--
GitLab