Touch UI dialog | Set height and width | Community
Skip to main content
Level 2
October 16, 2015
Solved

Touch UI dialog | Set height and width

  • October 16, 2015
  • 3 replies
  • 8395 views
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.
Best answer by smacdonald2008

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));

3 replies

smacdonald2008
Level 10
October 16, 2015

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

smacdonald2008
smacdonald2008Accepted solution
Level 10
October 16, 2015

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));

teufeld
Level 2
July 17, 2017

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