Thursday, February 18, 2016

AEM Touch UI : Increasing the Author Dialog width & Height with CSS

The author dialog in Touch UI will look smaller and don't have the option to set width & height in the properties like Classic UI dialogs. But this can be fixed by overriding the CSS under your apps clientlib folder. I'm not covering here the steps for creating the clientlib. The style that needs to be added in the CSS is as follows:

/*changes author dialog box size*/
.cq-dialog-floating {
width:70%;
height:80%;
overflow:auto;
}

/*.cq-dialog-floating .coral-TabPanel-content*/
.cq-dialog-floating .cq-dialog-content.coral-TabPanel > .coral-TabPanel-content, .cq-dialog-floating .cq-dialog-content > .coral-TabPanel > .coral-TabPanel-content {
height:90% !important;
padding-bottom: 7rem !important;  /*just to fix the drop down box clipping inside */
overflow: hidden !important;
}

.cq-dialog-floating .coral-FixedColumn-column {
width:90%;
height:100%;
}