[MGNLUI-5871] Missing labels when using horizonlayout for composite fields Created: 18/May/20  Updated: 16/Feb/21  Resolved: 11/Feb/21

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

Type: Improvement Priority: Neutral
Reporter: Oanh Thai Hoang Assignee: Šimon Demočko
Resolution: Obsolete Votes: 0
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: GIF File CleanShot 2021-02-09 at 15.47.17.gif     PNG File default-layout.png     Zip Archive hello-magnolia.zip     PNG File horizontal-layout.png    
Issue Links:
Issue split
split to MGNLUI-6554 Improve design pattern for horizontal... Closed
Problem/Incident
is caused by MGNLUI-5636 Improve horizontal display for compos... Closed
Relates
relates to MGNLUI-6399 Multifield control buttons cover the ... Closed
relates to MGNLUI-5636 Improve horizontal display for compos... Closed
relation
is related to MGNLUI-6467 Old pages app: Labels from composite/... 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)
Date of First Response:
Epic Link: Dialog UX improvements
Sprint: UI FW 21
Story Points: 3

 Description   

Step to reproduce:

  • Create a hello-template page (attached templating component hello-magnolia.zip)
  • Create 1 component quotation-new-ui
  • See component compositefield as default layout  
  • Configure horizontal layout for compositefield (uncomment below)
      # layout:
      #     $type: horizontal
  • See strange layout (missing fields and label) 

DEV NOTES

Check if expanding the dialog shows the labels (in case they are squashed). 

Consider if the solution can be driven so as to address MGNLUI-6399 as well, since it's similarly a problem with horizontal layouting.
We can consider having an overflowing container that scrolls horizontally.



 Comments   
Comment by Šimon Demočko [ 09/Feb/21 ]
  • Captions are no longer missing, this part is non-reproducible.
  • The fact that items do not fit is because there's too many of them. The mockups in MGNLUI-5636 were limiting the number of fields in a horizontal composite to 4, see here.
  • Nesting composites within a horizontal layout has undefined behavior and would require further specs. 
  • As well for if we want to support more than 4 fields in a horizontal layout.

Otherwise, if we don't plan to change support, we could document that the maximum amount for such layouting is 4 and anything beyond that will not necessarily render properly.

Comment by Šimon Demočko [ 09/Feb/21 ]

This is the current behavior. What we should fix is that currently the container for the layout is going off bounds where it shouldn't. 

Also, the space is further limited by buttons, if composite is in a multi, as in MGNLUI-6399 (which would limit number of fields in a multiplied composite further to 3)

Do we want to introduce some wrapping of horizontally laid out fields or just some documentation with recommended amount of fields in such a composite?

Comment by Šimon Demočko [ 11/Feb/21 ]

Since the labels are there and that seemed to be the ticket's major concern (considering summary), I'll close this ticket as obsolete.

How to layout the fields in a horizontal layout is split into a UX ticket MGNLUI-6554.

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