Touch Ui Dialog OOTB CSS

Question

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 @8056617 @71132

Thanks

Ravi_Pampana · Accepted Answer

Hi

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.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded