Fix inconsistent spacing in error messages for create activity fields #1704
Conversation
| div.is-error { | ||
| margin-bottom: 40px; | ||
| } |
There was a problem hiding this comment.
Could we do this in the Activity form component?
I'm afraid that with this change, it will affect all form-items throughout the app which can cause some unexpected visual changes
There was a problem hiding this comment.
in the parent form div element for each field, the class appears twice or thrice in the case of the isError class
<div class="el-form-item mb-4 mb-4"> or <div class="el-form-item isError isError isError">
any idea why this is happening?
There was a problem hiding this comment.
Interesting 🤔
No, not sure why it is happening, also not being able to see it
There was a problem hiding this comment.
I'll send a screenshot when I can. Strange that's happening only for me. Although the code should as expected baring this occurrence, it doesn't really affect anything
…ay/crowd.dev into inconsistent-spacing-error-messages
| <style scoped> | ||
| .isError { | ||
| margin-bottom: 40px; | ||
| } |
There was a problem hiding this comment.
Is this needed? Since you are already applying the classes on top?
Also, instead of adding the above :class="[$v.activityType.$errors.length ? 'isError' : 'mb-4']" to each form item, would it be better to add to the <style scoped> the following?
.el-form-item.is-error {
@apply mb-8;
}
| @@ -7,7 +7,7 @@ | |||
| <template #content> | |||
| <div class="-mt-4"> | |||
| <app-form-item | |||
| class="mb-4" | |||
| :class="[$v.member.$errors.length ? 'isError' : 'mb-4']" | |||
There was a problem hiding this comment.
I think it should be mb-8, the message is still to close to the bottom field.
|
Hey @peoray any updates here? If you need any help from me let me know 😄 |
Changes proposed ✍️
Fixes #1382
What
🤖 Generated by Copilot at 1661a46
Added scoped style to
form-item.vuecomponent to increase spacing between error messages and form inputs. This improves the user interface and resolves issue #12.
🤖 Generated by Copilot at 1661a46
Why
How
🤖 Generated by Copilot at 1661a46
form-item.vuecomponent to increase margin between error message and next form item (link)Checklist ✅
Feature,Improvement, orBug.