Touch Ui Dialog OOTB CSS



Hi All,


I have to change the width of touch UI dialog,

Suppose we have Tags (tagpicker) in Dialog, now user select some tags and it is having structure like:

Tags :

Tag --> Child Tag1 --> Child Tag2

Tags2 --> Child Tag2a 


and so on..


Now suppose if Child Tag1 is big in length so in dialog it'll show like Child Ta...

In this case, we have to increase the width of the container, in which tags are there.


So, to modify TouchUI dialog, which OOTB CSS we need to overlay to get the full content(name)  of Tags

@kautuk_sahni @Jaideep31 @arunk 



AEM 6.3 OOTB CSS Touchui dialog

Accepted Solutions (1)

Accepted Solutions (1)






If you are looking to overwrite the styles for below class which is for tag name then the OOB file path is "/libs/clientlibs/granite/coralui3/css/all.css" in AEM 6.4


coral-columnview-item-content {
display: block;
padding-top: .5rem;
padding-right: .9375rem;
padding-left: .9375rem;
height: 2rem;
line-height: 2rem;
white-space: nowrap;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;


It will be helpful if you can share the AEM version and the styles which you want to overwrite.

Also, no need to overwrite the complete file, just overwrite the styles which you want in a new css file and add the file to coralui3 category. In this way it will reduce the changes required in next upgrade.



Answers (0)