[MGNLUI-5976] Bad vertical alignment for multi-value and composite fields on dialogs Created: 18/Jun/20  Updated: 22/Jun/21  Resolved: 15/Jul/20

Status: Closed
Project: Magnolia UI
Component/s: None
Affects Version/s: None
Fix Version/s: 6.2.2

Type: Improvement Priority: Major
Reporter: Christopher Zimmermann Assignee: Aleksandr Pchelintcev
Resolution: Done Votes: 1
Labels: None
Remaining Estimate: Not Specified
Time Spent: 20m
Original Estimate: Not Specified

Attachments: PNG File bug-linkfield-width.png     PNG File complexFormlayout in default dialog.png     PNG File complexFormlayout in wide dialog.png     PNG File complexFormlayout with lines explained.png     PNG File complexFormlayout with lines.png     PNG File form-asset-meta.png     PNG File forms-link-field-label-vertical-alignment.png     PNG File forms-radio-responsive-small.png    
Issue Links:
Relates
relates to MGNLUI-5944 Text Fields Used in Composite Fields ... Closed
relates to MGNLUI-6048 Make sure file details in asset uploa... Closed
relates to MGNLUI-6049 Fix CSS ruleset to make stacked compl... Closed
causality
is causing MGNLUI-6046 Datefield should be responsive Closed
dependency
is depended upon by MGNLUI-4884 Optiongroup wraps too quickly despite... Closed
is depended upon by MGNLUI-5957 multivalue composite field is hard to... Closed
documentation
to be documented by MGNLUI-5825 DOC: Update form layouts Closed
duplicate
is duplicated by MGNLUI-5957 multivalue composite field is hard to... Closed
supersession
supersedes MGNLUI-5052 Improve vertical display of multivalu... 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)
Release notes required:
Yes
Documentation update required:
Yes
Date of First Response:
Epic Link: Dialog UX improvements
Sprint: UI FW 5, UI FW 6
Story Points: 13

 Description   

In the pages app - in a dialog - the Link fields are too narrow - one cannot see what they contain.

See attached image.

There is a lot of apparently unused space on the left side of the dialog



 Comments   
Comment by Šimon Demočko [ 22/Jun/20 ]

Hi avongunten, we're dealing with this and another ticket MGNLUI-5944 which has the same problem - the spacing in the dialogs is not enough to fit in composites, switchables and other. Please see screenshot. Could you give us some mockups on how we want to make it look? This may be relevant MGNLUI-5684

Comment by Anja von Gunten [ 02/Jul/20 ]

Here is a design direction that can be followed if feasible (the form layout is a sample mockup with random content)

This is how it would look like

in a sub app form layout

   

in a wide dialog

in a default dialog

Comment by Christopher Zimmermann [ 10/Jul/20 ]

apchelintcev  There are three apps created by the content-types-examples that are a good realistic test case. See 'tour-guide' and 'tour-office'.

Note: In order to use this example on 6.2.2 it might be necessary to change the app definitions to use '!content-type-m5'. (Or alternatively to remove any "overlayed configuration" in those files.

https://git.magnolia-cms.com/users/cmeier/repos/content-type-examples/browse

Comment by Christopher Zimmermann [ 15/Jul/20 ]

There is a massive improvement over status in 6.2.1, but I am reopening because two important fields have a bad vertical alignment of the labels. While the forms are usable, they are visible flaw in the UI that will show up frequently. And are clearly differnt to the UI mockups where the label should always be at the same vertical height as the controls themselves.

1. Link fields always have a bad vertical alignment of the label.

2. Radio buttons have a bad vertical alignment of the label, when the browser window is narrow, but appear ok when the window is side.

Comment by Christopher Zimmermann [ 15/Jul/20 ]

Issue with Asset meta information label vertical positioning.

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