[MGNLUI-3871] Missing red line in multi-value field validation Created: 02/May/16  Updated: 09/Feb/17  Resolved: 29/Jun/16

Status: Closed
Project: Magnolia UI
Component/s: forms
Affects Version/s: 5.3.14, 5.4.6
Fix Version/s: 5.4.8, 5.5

Type: Bug Priority: Neutral
Reporter: Andreas Weder Assignee: Hieu Nguyen Duc
Resolution: Fixed Votes: 0
Labels: forms, ux, visual-design
Remaining Estimate: 0d
Time Spent: 4d 1h
Original Estimate: 3d

Attachments: PNG File Missing line.example 1.png     PNG File Missing line.example 2.png     PNG File fieldsetHas2PxLeftMargin.png     PNG File firefox-fieldset-margin.png     PNG File form-validation-detail-editor.png     PNG File form-validation-dialog.png     PNG File validationHighlightHas2PxBorder.png    
Issue Links:
Relates
relates to MGNLUI-3313 Improve validation capabilities of th... Closed
relates to MGNLUI-3664 Display multiple error messages as st... Closed
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Bug DoR:
[ ]* Steps to reproduce, expected, and actual results filled
[ ]* Affected version filled
Date of First Response:
Sprint: Saigon 50
Story Points: 3

 Description   

When a multi-value field fails to validate, we mark the field as having an error, but the visualization misses the red line on the right. The result leaves the impression of a broken form.



 Comments   
Comment by Hieu Nguyen Duc [ 17/Jun/16 ]

Comments

This issue occurs not only in multi-value field, but also other fields.

Root cause

  • fieldset has 2-px margin so it's pushing the panel to the right out of its parent.
  • In addition, .validation-highlight has 2-px border

        => The 2-px right border of .validation-highlight is out and hidden

Solution

  • Initialize field container with transparent border
  • Show red border if validation fails

Side notes: We can't simply add margin-right: 2px to .validation-highlight because it reduces the input width on validation.

Comment by Mikaël Geljić [ 27/Jun/16 ]

As we see on the attached image below, the default browser styles include a 2px margin for fieldset elements (at least in FF). This confuses Vaadin to start with, because it doesn't account for this margin (Hence why the overall element overflows the dialog).

Question is how much margin to we want when the validation box is on.
In mockups (see MGNLUI-3313), the original design for the box was more generous, respecting default left-right margins.
In reality, we often lack space for captions or fields, so we could also live with a 2px margin for current implementation.

Comment by Mikaël Geljić [ 28/Jun/16 ]

I ended up pushing those changes a little further, making sure to retain the current apparence as much as possible—while supporting the "boxy" validation uniformly across forms/dialogs.

In effect, here's what I did (from commit desc):

  • Remove fieldset's default browser margin (broke Vaadin sizing)
    • Add paddings and transparent border to all field entries (substracted from current margins to preserve same layout)
    • Make sure we have 3px spacing between form edge and field container—same goes for inline bubbles
    • Preserve 140px width for field captions, thus field width is actually reduced a bit (by 2px or so)
  • Took the occasion to replace the long-standing broken form-error margin-top with margin-bottom (2px empty spacing between each form element)

See attached screenshots for results:

Comment by Oanh Thai Hoang [ 30/Jun/16 ]

Had tested in Firefox v 32.0, Chrome v 52.0.2743.49 beta (64-bit), IE v 11.0.9600.17031 with light dialog, complex dialog and detail editor

Generated at Mon Feb 12 09:10:56 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.