Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

How to make components fit or wrap within a dialog?

Avatar

Level 4

Components within a dialog are extending beyond the vertical scroll bar, and when we choose full-screen, a horizontal scroll bar appears allowing to view the edges of the components. How can we reduce the width of components or make them wrap within dialog box?

 

edge1.png

 

When chosen full-screen on the dialog.

 

edge2.png

 

Code in components > _cq_dialog > .content.xml

 

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/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="Program Form"
          sling:resourceType="cq/gui/components/authoring/dialog">          
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
    <items jcr:primaryType="nt:unstructured">
    ...
1 Accepted Solution

Avatar

Correct answer by
Level 10

Hello,

 

It's a bit hard to diagnose the issue without the full XML because I can't reproduce this error, but here are some possible causes:

 

  1. Strange issues like this can happen in you're missing coralui2 and coralui3 libraries. Please make sure that you are consistently using coralui3. You'll know the difference between the two because Coral 2 widgets are at /libs/granite/ui/components/foundation and Coral 3 widgets are at  /libs/granite/ui/components/coral/foundation.

  2. Are your components directly under the <items> node in your XML snippet? Because if so, then Granite is counting each of your components as a column. Instead, you the fixedcolumns node should contain only container nodes (each one being a column) and then those containers should contain the components. Here is some XML as an example:

 

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/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="Demo"
    sling:resourceType="cq/gui/components/authoring/dialog"
    extraClientlibs="[cmp.demo.editor]">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <properties
                jcr:primaryType="nt:unstructured"
                jcr:title="Properties"
                sling:resourceType="granite/ui/components/coral/foundation/container"
                margin="{Boolean}true">
                <items jcr:primaryType="nt:unstructured">
                    <columns
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                        margin="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <column
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/container">
                                <items jcr:primaryType="nt:unstructured">
                                    <text
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                        fieldLabel="Text"
                                        name="./text"/>
                                </items>
                            </column>
                        </items>
                    </columns>
                </items>
            </properties>
        </items>
    </content>
</jcr:root>
​

 

This gives the following result:

Selection_074.png

  • You seem to have a LOT of properties in your edit dialog. For UI/UX purposes, I suggest you use tabs to break up all that information a bit for the user. Here is the same XML as above, but now there are two tabs:

 

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/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="Demo"
    sling:resourceType="cq/gui/components/authoring/dialog"
    extraClientlibs="[cmp.demo.editor]">
    <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="Properties"
                        sling:resourceType="granite/ui/components/coral/foundation/container"
                        margin="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <columns
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                                margin="{Boolean}true">
                                <items jcr:primaryType="nt:unstructured">
                                    <column
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/container">
                                        <items jcr:primaryType="nt:unstructured">
                                            <text
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                fieldLabel="Text"
                                                name="./text"/>
                                        </items>
                                    </column>
                                </items>
                            </columns>
                        </items>
                    </properties>
                    <advanced
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Advanced"
                        sling:resourceType="granite/ui/components/coral/foundation/container"
                        margin="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <columns
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                                margin="{Boolean}true">
                                <items jcr:primaryType="nt:unstructured">
                                    <column
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/container">
                                        <items jcr:primaryType="nt:unstructured">
                                            <advanced-text
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                fieldLabel="Advanced Text"
                                                name="./advancedText"/>
                                        </items>
                                    </column>
                                </items>
                            </columns>
                        </items>
                    </advanced>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>
​

 

This gives the following result:


Peek 2020-04-02 09-32.gif

View solution in original post

3 Replies

Avatar

Correct answer by
Level 10

Hello,

 

It's a bit hard to diagnose the issue without the full XML because I can't reproduce this error, but here are some possible causes:

 

  1. Strange issues like this can happen in you're missing coralui2 and coralui3 libraries. Please make sure that you are consistently using coralui3. You'll know the difference between the two because Coral 2 widgets are at /libs/granite/ui/components/foundation and Coral 3 widgets are at  /libs/granite/ui/components/coral/foundation.

  2. Are your components directly under the <items> node in your XML snippet? Because if so, then Granite is counting each of your components as a column. Instead, you the fixedcolumns node should contain only container nodes (each one being a column) and then those containers should contain the components. Here is some XML as an example:

 

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/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="Demo"
    sling:resourceType="cq/gui/components/authoring/dialog"
    extraClientlibs="[cmp.demo.editor]">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <properties
                jcr:primaryType="nt:unstructured"
                jcr:title="Properties"
                sling:resourceType="granite/ui/components/coral/foundation/container"
                margin="{Boolean}true">
                <items jcr:primaryType="nt:unstructured">
                    <columns
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                        margin="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <column
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/container">
                                <items jcr:primaryType="nt:unstructured">
                                    <text
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                        fieldLabel="Text"
                                        name="./text"/>
                                </items>
                            </column>
                        </items>
                    </columns>
                </items>
            </properties>
        </items>
    </content>
</jcr:root>
​

 

This gives the following result:

Selection_074.png

  • You seem to have a LOT of properties in your edit dialog. For UI/UX purposes, I suggest you use tabs to break up all that information a bit for the user. Here is the same XML as above, but now there are two tabs:

 

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/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="Demo"
    sling:resourceType="cq/gui/components/authoring/dialog"
    extraClientlibs="[cmp.demo.editor]">
    <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="Properties"
                        sling:resourceType="granite/ui/components/coral/foundation/container"
                        margin="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <columns
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                                margin="{Boolean}true">
                                <items jcr:primaryType="nt:unstructured">
                                    <column
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/container">
                                        <items jcr:primaryType="nt:unstructured">
                                            <text
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                fieldLabel="Text"
                                                name="./text"/>
                                        </items>
                                    </column>
                                </items>
                            </columns>
                        </items>
                    </properties>
                    <advanced
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Advanced"
                        sling:resourceType="granite/ui/components/coral/foundation/container"
                        margin="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <columns
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                                margin="{Boolean}true">
                                <items jcr:primaryType="nt:unstructured">
                                    <column
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/container">
                                        <items jcr:primaryType="nt:unstructured">
                                            <advanced-text
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                fieldLabel="Advanced Text"
                                                name="./advancedText"/>
                                        </items>
                                    </column>
                                </items>
                            </columns>
                        </items>
                    </advanced>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>
​

 

This gives the following result:


Peek 2020-04-02 09-32.gif

Avatar

Level 4

Thanks @Theo_Pendle 

Making sure all elements are under "<items>" fixed the issue.

Avatar

Community Advisor

It is look like your component dialog not structure is not correct to look good.

same as suggested by @Theo_Pendle 



Arun Patidar