Touch Ui Dialog OOTB CSS

tushaar_srivastava

18-12-2019

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 

 

Thanks

AEM 6.3 OOTB CSS Touchui dialog

Accepted Solutions (1)

Accepted Solutions (1)

Ravi_Pampana

MVP

18-12-2019

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.

 

categories
String[]
coralui3

Answers (0)