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

Touch UI dialog | Set height and width

Avatar

Level 2
How do we set height and width for Touch UI dialog?
I have more than five tabs in the dialog and fourth and fifth tabs are not displayed properly.

Also, resizing the dialog is not possible using mouse. Is there any configuration for this?

1 Accepted Solution

Avatar

Correct answer by
Level 10

Here is the answer to your question - you can control via code:

(function ($, $document) {

    "use strict";

    function adjustLayoutHeight(){

        //with only two selects, the second select drop down is not visible when expanded, so adjust the layout height

        //fixedcolumns i guess doesn't support property height, so fallback to jquery

        //http://docs.adobe.com/docs/en/aem/6-0/develop/ref/granite-ui/api/jcr_root/libs/granite/ui/components...

        $(".coral-FixedColumn-column").css("height", "18rem");

    }

    $document.on("dialog-ready", function() {

        adjustLayoutHeight();

    });

})($, $(document));

View solution in original post

3 Replies

Avatar

Level 10

That is an excellent question. I am going to find out the answer for that and update this thread. As well - i am going to update this article:

Creating your first Adobe Experience Manager Touch UI component @ https://helpx.adobe.com/experience-manager/using/creating-touchui-component.html

Avatar

Correct answer by
Level 10

Here is the answer to your question - you can control via code:

(function ($, $document) {

    "use strict";

    function adjustLayoutHeight(){

        //with only two selects, the second select drop down is not visible when expanded, so adjust the layout height

        //fixedcolumns i guess doesn't support property height, so fallback to jquery

        //http://docs.adobe.com/docs/en/aem/6-0/develop/ref/granite-ui/api/jcr_root/libs/granite/ui/components...

        $(".coral-FixedColumn-column").css("height", "18rem");

    }

    $document.on("dialog-ready", function() {

        adjustLayoutHeight();

    });

})($, $(document));

Avatar

Level 2

Hi,

Someone wrote a clientlib to overlay the dialog layer.

Resizing Touch UI component dialogs | 6D Labs

In order to add the width and height parameter in the cq:dialog.

But I was wondering if Adobe wrote something similaire with the last version AEM 6.3 or do I have to create my own "overlay" thing ?

Thanks