[MGNLUI-6554] Improve design pattern for horizontal layouts Created: 11/Feb/21  Updated: 13/Nov/23  Resolved: 13/Nov/23

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

Type: Task Priority: Neutral
Reporter: Šimon Demočko Assignee: Anja von Gunten
Resolution: Won't Do Votes: 0
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Issue Links:
Issue split
split from MGNLUI-5871 Missing labels when using horizonlayo... Closed
Relates
relates to MGNLUI-6426 Horizontal radiobutton options are mi... Closed
dependency
is depended upon by MGNLUI-6399 Multifield control buttons cover the ... Closed
Template:
Acceptance criteria:
Empty
Task DoR:
Empty
Date of First Response:
Epic Link: UX improvements

 Description   

Currently, we have this mockup for horizontal layouts.

There are some things left unclear:

  • what about fields that do not stretch, like checkboxes?
  • what to do when there are too many fields? Some options to consider from easiest to more expensive:
    • write in the documentation that that's up to the user to limit it reasonably, they can rely on widening the dialog but then users with limited screens won't reach the fields 
    • use some container, where overflowing fields will be horizontally scrollable
      • this could be visually unappealing
  • what to do about nesting
    • one of the fields being composite
      • and set the layout to be non-horizontal/horizontal
    • or worse a multi — these examples clearly show that the user would be stretching the functionality to test it limits rather than looking for a reasonable setup.
  • multi fields have buttons to the right of the fields, stealing some space. If a multi's inner field is designed to be horizontally laid out, the layout needs to account for the presence of those buttons. This was already filed as a bug here: MGNLUI-6399 The design needs to account for possibly narrowed spaces like being a nested multifields's entry or generally, being in a dialog


 Comments   
Comment by Simon Lutz [ 18/Feb/21 ]

what to do when there are too many fields? Some options to consider from easiest to more expensive:

How about breaking into a second/more lines?

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

TLDR: It probably could be done, but the cost would likely hardly justify any business value.

Yeah, I thought of "line wrapping", but we've been bitten by providing hyperflexible configurations (hyperflexiblity is fragile), mainly due to maintenance costs and lurking bugs and the question is if there would ever be a good reason to want to have fields line up as words in the text, especially that compared to characters lining up nicely all with the same height, fields can have different heights, which could lead to really cumbersome results. 

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