Touch Ui Dialog OOTB CSS

[#1]

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

[tushaar_srivastava · Accepted solution]

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

[tushaar_srivastava · Accepted solution]

Thanks Ravi for your response : I am using AEM 6.3.0 and the scenario is suppose if we open dialog, either page property dialog or normal touch ui dialog, and we have Tag picker, some tags name are quite large, in that case we just need to increase the width of dialog container (Static, not dynamic)

[Ravi_Pampana · Accepted solution]

Hi, Based on your comment, you want to increase the dialog container size based on the text. You can reload the author page with debugClientLibs=true parameter which will load the css files individually and you can inspect the styles which you want to overwrite. Also, as mentioned earlier, if you know the css names you can add a css file with overwritten styles and add the file to coralui3 category.

[tushaar_srivastava · Accepted solution]

Yes, but in this case, it'll increase the width of pathbrowser nut we need to change only for Tagpicker