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%;
}
How do you create the client lib? That's the most important part.
ReplyDeleteHi Tal, To create the clientlibs folder (which will hold the css and javascript files used by your component) do the following steps: Assume we are creating a component called 'approtator';
Delete1. Under the approtator folder, create a new folder named 'clientlibs'
2. Inside the clientlibs, add two files js.txt (if you create javascript this is where you will register the js files to be used by the component) and css.txt (this will hold file names containing the css rules). In our case, I will add approtator.css in css.txt file and save it.
3. Inside clientlibs folder create a file named '.content.xml' and add the following content:
and save it.
4. Create a folder 'approtator.css.dir' under clentlibs
5. Create a file '.content.xml' inside approtator.css.dir and add the following content:
and save it.
6. Inside the clientlibs, add a new file 'approtator.css' and you can add your css there...In our case we can add:
/*changes author dialog box size*/
.coral-Form{
height: auto !important;
}
and save it.
Build your project and you will see that the height of the dialog has changed from what it was before.
Hope this helps!!
Enjoy.