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.

AEM touch ui dialog 6.3 - Validation Error Icon is overlapping Description icon

Avatar

Level 4

I have a title component(touch-ui) in my project and made the title field mandatory by setting required(boolean) – true at the title property level. Now, when we save the dialog with an empty title field, validation fires up, but the triangular icon overlaps the description icon in the component. See screenshots below. Is there any way to resolve this?

Seeing the same behavior in We.retail title component.

Screen Shot 2019-04-17 at 4.05.50 PM.png

Screen Shot 2019-04-17 at 4.06.08 PM.png

12 Replies

Avatar

Community Advisor

Hi,

You can add custom css by targeting specific class added to your component/field and adding the style sheet to "cq.authoring.dialog" or "cq.authoring.editor.hook" category.

Also, try checking below resourcetype to include clientlibs for a component cq:dialog

include_clientlibs.png

Avatar

Level 4

Hi Ravi - This issue in generic in nature for all the different types of dialog fields like text, path browser etc. We are looking for a generic solution. Maybe adding some properties at the cq: dialog level, or something else.

Avatar

Community Advisor

Hi Karanmahi,

I think it is as per the design, when error message is shown for a field in cq:dialog, tooltip icon html is getting added additional class " u-coral-screenReaderOnly" and error icon is being shown at the same location.

Raising a day care ticket might help, or adding custom styles for class  u-coral-screenReaderOnly might be an option

Screen Shot 2019-04-17 at 8.47.55 PM.png

Avatar

Community Advisor

Hi,

Here the solution is make visible info icon which is hidden(out of the view port).

To do so add below CSS in your in clientlibs of category cq.authoring.dialog

.cq-dialog-content .coral-Form-fieldinfo.coral-Icon.u-coral-screenReaderOnly{

  width:45px !important;

  height: auto !important;

  clip: auto;

}

The result of above CSS changes would be like

1735543_pastedImage_4.png



Arun Patidar

Avatar

Level 4

Thanks, Arun. It works. Basically, it is shifting the description icon to the left side which should not cause any issue.

Avatar

Level 4

Hi Arun - It's not working. Actually, error message is getting hidden. For example, if the field is mandatory, and if there is no fieldDescription, then an error message will be shown. Look at the "Title" field where we see the error. But if we put the above css, then error message is not shown. Look at the "Title1" field. This is a big issue.

Also,  description icon seems to be aligned on the little left which doesn't make the dialog look good. Is there anything we can do? This is not much important issue but the first one is hiding the error message, which will not be acceptable.

Screen Shot 2019-04-18 at 4.28.33 PM.png

Screen Shot 2019-04-18 at 4.30.40 PM.png

Avatar

Level 10

I would open a ticket here, If you cannot get the CSS correct - as ARUN suggest - then open a ticket and let the team know that there is an issue that you have identified.

Avatar

Community Advisor

Please try with below css

.cq-dialog-content .coral-Form-fieldinfo.coral-Icon.u-coral-screenReaderOnly{

  width: 22px !important;

  height: auto !important;

  clip: auto;

  right: 22px;

}



Arun Patidar

Avatar

Level 4

Hi Arun - Can we do little change in above css such that error icon comes on left side of description icon. The reason I am saying is when we open the dialog, description icon is aligned on the little left which doesn't make the dialog look good. So, what I would want is if we can display the error message icon to the left of the descrption icon. That way description icon will look the same as OOTB and if any error happens, then that would be shown on left side. I mean swapping of icon. But above CSS is working least for description icon on right and error icon on left.

Avatar

Community Advisor

.cq-dialog-content .coral-Form-fieldinfo.coral-Icon.u-coral-screenReaderOnly{

  width: 22px !important;

  height: auto !important;

  clip: auto;

}

.cq-dialog-content .coral-Form-fielderror.coral-Icon{

  right:28px !important;

}



Arun Patidar

Avatar

Level 1

Hi @arunpatidar  Is there any way to remove that error message after filling that text field?