Posts tagged "cq component dialog sizing"

November 17, 2011

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

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.


3:46 PM Permalink