[MGNLUI-6399] Multifield control buttons cover the fields with horizontal layout Created: 10/Nov/20  Updated: 19/Nov/21  Resolved: 19/Nov/21

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

Type: Bug Priority: Neutral
Reporter: Monica Damborenea Assignee: Anja von Gunten
Resolution: Obsolete Votes: 0
Labels: multifield
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: PNG File Screenshot 2021-11-19 at 09.35.32 (2).png     PNG File controlbuttons.png    
Issue Links:
Problem/Incident
Relates
relates to MGNLUI-5684 Extend MultiFormView to use LayoutPro... Closed
relates to MGNLUI-5871 Missing labels when using horizonlayo... Closed
dependency
depends upon MGNLUI-6554 Improve design pattern for horizontal... 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:
Epic Link: M6 MultiFormView

 Description   

When we add too many fields in a multifield and the layout is set to horizontal, the control buttons (up, down, remove) are over the fields. It looks like the width of these buttons does not adapt to the Multifield width.

Steps to reproduce

  • Create the multifield as in the example below with the layout set to horizontal, when using the vertical layout we do not see this problem.
    !content-type:content-type-programs
    name: programs
    label: programs.app.name
    enabled: true
    icon: icon-content-app
    subApps:
      detail:
        form:
          properties:
            fechasSalidasRango:
              $type: jcrMultiField
              itemProvider:
                $type: jcrChildNodeProvider
              field:
                $type: compositeField
                itemProvider:
                  $type: jcrChildNodeProvider
                layout:
                  $type: horizontal
                properties:
                  desde:
                    $type: dateField
                    type: java.util.Date
                    dateFormat: dd-MM-yyyy
                  hasta:
                    $type: dateField
                    type: java.util.Date
                    dateFormat: dd-MM-yyyy
                  lunes:
                    $type: checkBoxField
                    buttonLabel: ""
                  martes:
                    $type: checkBoxField
                    buttonLabel: ""
                  miercoles:
                    $type: checkBoxField
                    buttonLabel: ""
                  jueves:
                    $type: checkBoxField                
                    buttonLabel: ""
                  viernes:
                    $type: checkBoxField
                    buttonLabel: ""
                  sabado:
                    $type: checkBoxField
                    buttonLabel: ""
                  domingo:
                    $type: checkBoxField
                    buttonLabel: ""
    
  • Render it, and note that the control fields are over the fields we set:
     

Expected results

The control buttons should be on the right of the fields

Actual results

The control buttons are over the fields

Workaround

Use vertical layout instead.

Development notes

https://git.magnolia-cms.com/projects/PLATFORM/repos/ui.pub/browse/ui-test-webapp/src/main/java/info/magnolia/ui/incub/MultiField.java
Check what happens in 5.7 with Horizontal Layouts overflowing



 Comments   
Comment by Jakub Petras [ 19/Nov/21 ]

Good morning. I tried to reproduce this issue in browsers Safari Version 15.0, Chrome Version 96 and my result looks fine. Is this issue still actual?

 

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