Overflow hidden in dialog when dragging a multifield nested in a tab

[parag_dalal]

Hello,

I am encountering the following issue.

Whenever a dialog box contains multiple tabs (granite/ui/components/coral/foundation/tabs) and in one of those tabs is nested a Coral3 multifield (granite/ui/components/coral/foundation/form/multifield), when dragging and dropping the single fields of the multifield to rearrange their order (i.e. when clicking on the moveUpDown icon), the scroll bar on axis-y disappears, since a javascript is fired that sets the property overflow of the container to hidden.

The same dynamic does not reproduce if the multifield is not nested in a tab.

This is, more or less, the situation before clicking on the button to move the fields:

(some of the fields are blanked out, but they are actually there)

And this is an image of what happens when you click on the highlighted icon to move the field up and down:

As you can see, the scrollbar disappears.

To be more specific, this line of code in the coralui3.js is executed:

Which sets the overflow property of the coral-panel-content (basically the container of the entire tab, that starts right under the Main title) to hidden (default is auto) :

We are on a 6.5 istance and, if it can be helpful, the content.xml of that dialog (which is just an example: the issue is present in all dialogs with multifields nested in tabs) is the following:

START OF DIALOG

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="Image"
sling:resourceType="cq/gui/components/authoring/dialog"
helpPath="https://www.adobe.com/go/aem_cmp_image_v1">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<tabs
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/tabs"
maximized="{Boolean}true">
<items jcr:primaryType="nt:unstructured">
<properties
jcr:primaryType="nt:unstructured"
jcr:title="Main"
sling:resourceType="granite/ui/components/coral/foundation/container"
margin="{Boolean}true">
<items jcr:primaryType="nt:unstructured">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
margin="{Boolean}false">
<items jcr:primaryType="nt:unstructured">
<allowedWidths
granite:class="core-image-widths"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
fieldLabel="widths">
<field
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
defaultValue="{Long}1280"
min="{Long}0"
name="./allowedRenditionWidths"
required="{Boolean}true"/>
</allowedWidths>
<disableLazyLoading
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
name="./lazy"
text="Lazy load"
value="{Boolean}true"/>
<decorative
granite:class="cmp-image--editor-decorative"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
name="./decorate"
text="Decorate"
value="{Boolean}true"/>
<displayCaptionPopup
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
name="./title"
text="Title"
value="{Boolean}true"/>
</items>
</content>
</items>
</properties>
<features
jcr:primaryType="nt:unstructured"
jcr:title="Features"
sling:resourceType="granite/ui/components/coral/foundation/container"
margin="{Boolean}true">
<items jcr:primaryType="nt:unstructured">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
margin="{Boolean}false">
<items jcr:primaryType="nt:unstructured">
<accordion
granite:class="js-cq-IPEPlugin-container"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/accordion"
variant="quiet">
<items jcr:primaryType="nt:unstructured">
<source
jcr:primaryType="nt:unstructured"
jcr:title="Source"
sling:resourceType="granite/ui/components/coral/foundation/container"
maximized="{Boolean}true">
<items jcr:primaryType="nt:unstructured">
<allowing
granite:class="js-cq-ImageEditor-allowUpload"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
checked="{Boolean}true"
deleteHint="{Boolean}false"
name="./allowing"
uncheckedValue="{Boolean}false"
value="{Boolean}true"/>
</items>
<parentConfig
jcr:primaryType="nt:unstructured"
active="{Boolean}true"/>
</source>
<orient
granite:class="js-cq-IPEPlugin-group"
jcr:primaryType="nt:unstructured"
jcr:title="Orient"
sling:resourceType="granite/ui/components/coral/foundation/container"
maximized="{Boolean}true">
<items jcr:primaryType="nt:unstructured">
<rotate
jcr:primaryType="nt:unstructured"
jcr:title="Rotate"
sling:resourceType="cq/gui/components/authoring/dialog/inplaceediting/configuration/plugin"
features="right"
name="rotate"/>
<flip
jcr:primaryType="nt:unstructured"
jcr:title="Flip"
sling:resourceType="cq/gui/components/authoring/dialog/inplaceediting/configuration/plugin"
features="horizontal,vertical"
name="flip"/>
</items>
</orientation>
<crop
granite:class="js-cq-IPEPlugin-group"
jcr:primaryType="nt:unstructured"
jcr:title="Cropping"
sling:resourceType="granite/ui/components/coral/foundation/container"
maximized="{Boolean}true">
<items jcr:primaryType="nt:unstructured">
<crop
jcr:primaryType="nt:unstructured"
jcr:title="Allow crop"
sling:resourceType="cq/gui/components/authoring/dialog/inplaceediting/configuration/plugin"
features="*"
name="crop"/>
<configWrapper
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/authoring/dialog/inplaceediting/configuration/wrapper"
configPath="./plugins/crop/aspectRatios">
<aspectratios
granite:class="cq-AspectRatio"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
composite="{Boolean}true"
fieldLabel="Aspect ratios">
<field
granite:class="cq-AspectRatio-field"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
name="./plugins/crop/aspectRatios">
<items jcr:primaryType="nt:unstructured">
<name
granite:class="cq-AspectRatio-name"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Name"
name="name"/>
<ratio
granite:class="cq-AspectRatio-ratio"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
fieldLabel="Ratio"
min="0"
name="ratio"
step="0.0001"/>
</items>
</field>
</aspectratios>
</configWrapper>
</items>
</crop>
</items>
</accordion>
</items>
</content>
</items>
</features>
</items>
</tabs>
</items>
</content>
</jcr:root>

END OF DIALOG

 I am currently at a loss to understand the root of the issue and how to fix it, so that the behaviour is restored to that which it normally has in non-nested-in-tabs multifields.

Any help will be greatly appreciated.

Thank you all in advance.

[arunpatidar · Accepted solution]

Please raise this with Adobe Support(day care).