Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Granite component looks differently since AEM 6.3

Avatar

Level 7

In my projects I used often the component 

granite/ui/components/coral/foundation/form/select

Since AEM 6.3 there is an issue that this granite component looks differently when you include it into a dialog for page properties and in dialog for a component.

 

Here the look in page properties: (This is not the expected look)

step1_2_selection.png

 

And here the look in component dialog. (This is the expected look)

step2_2_selection.png

How can I fix it in general? If is it a general bug will it fixed by Adobe?

 

Thanks in advanced.

1 Accepted Solution

Avatar

Correct answer by
Level 7

I solved it by going a different way:

 

I created an extra css file with value "overflow:unset". After that I added the recently created css file to clientlib category "coralui3", by creating an extra .content.xml with following content

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="cq:ClientLibraryFolder"
categories="[coralui3]" />

 

View solution in original post

9 Replies

Avatar

Community Advisor

Hi,

Its looks like a cosmetic issue. Not sure if this is fixed or not in the latest version of AEM.

but you can fix it by introducing additional CSS or look for AEM hotfix/feature fix



Arun Patidar

Avatar

Level 7

As I wrote "since AEM 6.3" this issue exists in AEM 6.4 und 6.5 either. And it is a little bit annoying.

Avatar

Level 7

How can I achive that, that my own css will be applied to page properties dialog?

Avatar

Community Advisor

You can use extraClientlibs property to add any clientlibs. your clientlibs will have only css. 



Arun Patidar

Avatar

Level 7

I could find the problem and a solution for it. A simple display:inline solves the problem. My question: what is the name of catogory of clientlibs so the gui for page properties accept this?

 

By the way: the "cosmetical problem" occurs also in we-retail project, so it is a general bug.

Avatar

Community Advisor

Hi,

You can have any name for the category e.g. myproj.author.dialog.select.inline

example page dialog

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Page"
    sling:resourceType="cq/gui/components/authoring/dialog"
    extraClientlibs="[myproj.author.dialog.select.inline]">
    <content
        granite:class="cq-dialog-content-page"
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <tabs
                granite:class="cq-siteadmin-admin-properties-tabs"
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/tabs"
                size="L">
                <items jcr:primaryType="nt:unstructured">
                   ...
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

 

 



Arun Patidar

Avatar

Correct answer by
Level 7

I solved it by going a different way:

 

I created an extra css file with value "overflow:unset". After that I added the recently created css file to clientlib category "coralui3", by creating an extra .content.xml with following content

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="cq:ClientLibraryFolder"
categories="[coralui3]" />

 

Avatar

Community Advisor

Hi,

This will solved your problem but the extra css that you have creating will be loading at other places(wherever coralui3 is used) also.

 

To restrict the custom clientlibs uses, generally extraClientlibs approach used.



Arun Patidar

Avatar

Level 7

Yes, I'm aware of it. We tested it on other sites of admin ui and of course from our dialogs from customs components and of course from we-retail project. Due to the frequent use of select widget we decieded to go this way.