Highlighted

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

Avatar

Avatar

karanmahi

Avatar

karanmahi

karanmahi

17-04-2019

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

Replies

Highlighted

Avatar

Avatar

Ravi_Pampana

MVP

Avatar

Ravi_Pampana

MVP

Ravi_Pampana
MVP

17-04-2019

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

Highlighted

Avatar

Avatar

karanmahi

Avatar

karanmahi

karanmahi

17-04-2019

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.

Highlighted

Avatar

Avatar

Ravi_Pampana

MVP

Avatar

Ravi_Pampana

MVP

Ravi_Pampana
MVP

17-04-2019

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

Highlighted

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

958

Correct Answer

820

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

958

Correct Answer

820
Arun_Patidar
MVP

18-04-2019

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

Highlighted

Avatar

Avatar

karanmahi

Avatar

karanmahi

karanmahi

18-04-2019

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

Highlighted

Avatar

Avatar

karanmahi

Avatar

karanmahi

karanmahi

18-04-2019

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

Highlighted

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K
smacdonald2008

18-04-2019

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.

Highlighted

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

958

Correct Answer

820

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

958

Correct Answer

820
Arun_Patidar
MVP

19-04-2019

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;

}

Highlighted

Avatar

Avatar

karanmahi

Avatar

karanmahi

karanmahi

19-04-2019

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.