Expand my Community achievements bar.

Touch UI Resizing Dialog

Avatar

Level 2

Is there any way to allow the re-sizing of a dialog without having to add custom JS and CSS files?

I know that in this question answer smacdonald2008 stated you needed custom clientlib JS.
(http://help-forums.adobe.com/content/adobeforums/en/experience-manager-forum/adobe-experience-manage...)

Even if this is how it is supposed to be done is there some sort of documentation for this process?

The process for creating a component has no information concerning this:
https://helpx.adobe.com/experience-manager/using/creating-touchui-component.html

Can anyone shed some light on the matter?

8 Replies

Avatar

Level 10

The process for creating a component has no information concerning this:
https://helpx.adobe.com/experience-manager/using/creating-touchui-component.html

The reason why we do not cover re-sizing the dialog in that article is because this is a getting started article. Therefore we kept this article to the main steps on how to create a TOuch UI and a dialog. 

I will look within Adobe to see if we have a blog that tells you how to do this. 

If not - we will get this written up in a helpx article. 

Avatar

Level 2

Thank you. It would be nice to have an article about this process.

Others have posted some blogs that I will also look at.

I only asked about the getting started guide because in that helpx adobe article you (smacdonald2008) stated that the article would be updated. Just wanted to clarify.

Avatar

Level 10

We will add that to the community list for sure. We are also working on Color Picker that you brought to our attention in another thread. 

http://scottsdigitalcommunity.blogspot.ca/2016/03/how-to-create-aem-touch-ui-color-picker.html

Avatar

Administrator

Hi

Please find below the reference links for your help:-

Link:- http://blogs.adobe.com/contentmanagement/tag/cq-component-dialog-sizing/

1. Create a node in your component of type cq:EditConfig and name cq:editConfig, this should be a sibling of the dialog node.

2. To the cq:editConfig node add a property with name “cq:dialogMode”, type “String” and value “floating”

3. To your dialog node add two properties of type Long, name height and width and value to what the you want the size of the dialog to be.

4. That should be it. This should open the dialog with the size that you mention in the height and width properties you created in the earlier step and give the users the ability to resize the window by dragging.

 

Link 2:- http://blogs.adobe.com/contentmanagement/2011/11/17/how-to-make-the-component-dialog-floating-and-se...

// How to make the component dialog floating and set a default size

 

Link3 :- http://labs.6dglobal.com/blog/2016-01-07/resizing-touch-ui-component-dialogs/

// Re sizing Touch UI component dialog.

 

I hope this would help you.

Thanks and Regards

Kautuk Sahni



Kautuk Sahni

Avatar

Level 1

note: kautuksahn's first link might work for classic UI but doesn't seem to work for touch UI to control the size of a cq:dialog which is a little confusing since other properties of editconfig are still in play with touch ui.  I would hope Adobe would strive for consistency in this respect.

Avatar

Level 10

I am seeing in the past year or two if anyone has written about this subject. It would most likely still be done in a similar way as discussed here -- Resizing Touch UI component dialogs | 6D Labs

Avatar

Level 1

It would also be great if users could resize the dialog window to suit their needs without having to choose between default and full screen. Most of our authors are still using workstations rather than mobile devices for content production.