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

[karanmahi]

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.

[Ravi_Pampana]

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

[karanmahi]

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.

[Ravi_Pampana]

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

[arunpatidar]

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

[karanmahi]

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

[karanmahi]

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.

[smacdonald2008]

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.

[arunpatidar]

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;

}

[karanmahi]

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.

[arunpatidar]

.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;

}

[ashishrajbhagat]

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

[arunpatidar]

Hi,
You need to write a listener to remove classes and aria-label

e.g. https://blogs.perficient.com/2017/11/06/aem-touch-ui-dialog-validation-new-best-practice-use-foundat...