by Kaushal Mall

Created

November 17, 2011

I recently ran into a situation where I wrote a custom widget for a client which had a list of 25 items to be displayed. The default dialog size of CQ wasn’t big enough for that and the users would have had to scroll up, down, right and left to cover the whole list. I figured out a way to make the dialog floating (which would give the users the ability to resize it by dragging) and to set a default size that can be as big or small than the default CQ dialog box. Here’s how to do it.

 

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.

 

COMMENTS

  • By Hien Hoang - 9:20 AM on January 18, 2012  

    i want ot know why component was floating and not solder to the other end

    • By Kaushal Mall - 4:02 PM on January 24, 2012  

      Hien,

      Not entirely sure what you mean by this comment. Can you please elaborate.

  • By Banu - 10:19 AM on May 24, 2012  

    Hi,

    This example shows, if the xtype on the cq:Dialog node is set to “dialog”. We have quite a bit components with a cq:Dialog node that has an xtype of panel or tabpanel already. Is there a way to resize these dialogs?

    • By liangrockman - 8:29 AM on January 23, 2013  

      I met the same problem.

  • By Mohammed Ahmed - 2:28 PM on May 12, 2013  

    I tried this setting on the dialog but my dialog is not resizing. Is there any other settings we have to change

    • By Kaushal Mall - 8:28 AM on May 13, 2013  

      Mohammed,

      What is the type of your dialog node? Try making the height and width properties of type String.

  • By Mohammed Ahmed - 2:04 PM on May 13, 2013  

    My dialog node is cq:Dialog of xtype:tabpanel. I tried using String for height and width it didn’t work out

  • By Mohammed Ahmed - 3:15 PM on May 13, 2013  

    I got it working after I change the xtype to dialog.