[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: |
|
||||||||||||
| Issue Links: |
|
||||||||||||
| 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 ] |
CommentsThis issue occurs not only in multi-value field, but also other fields. Root cause=> The 2-px right border of .validation-highlight is out and hidden Solution
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. |
| 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):
|
| 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 |