Touch UI dialog | Set height and width | Community
Skip to main content
Manender24
Level 2
Oct 16, 2015 2:27 AM UTC
Solved

Touch UI dialog | Set height and width

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?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
smacdonald2008
smacdonald2008Accepted solution
Level 10
Oct 16, 2015 2:27 AM UTC

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/foundation/layouts/fixedcolumns/index.html

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

    }

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

        adjustLayoutHeight();

    });

})($, $(document));

View reply

3 replies

teufeld
teufeld
Level 2
Jul 17, 2017 3:13 PM UTC

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

Translate
smacdonald2008
smacdonald2008
Level 10
Oct 16, 2015 2:27 AM UTC

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

Translate
smacdonald2008
smacdonald2008Accepted solution
Level 10
Oct 16, 2015 2:27 AM UTC

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/foundation/layouts/fixedcolumns/index.html

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

    }

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

        adjustLayoutHeight();

    });

})($, $(document));

Translate
Terms & ConditionsAccessibility statement

Loading footer...