How to make components fit or wrap within a dialog?

Forum|Forum|5 years ago
April 1, 2020
2 replies
3088 views

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?

When chosen full-screen on the dialog.

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">
    ...

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by Theo_Pendle

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:

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.
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:

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:

Theo_PendleAccepted solution

Level 8

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:

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.
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:

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: