Expand my Community achievements bar.

SOLVED

Overlapping issue in metadata schema when using text area field

Avatar

Level 3

Hi All,

Customer has a requirement to use text area field for the description in metadata schema. When we add textarea we are seeing fields are getting overlapped. But while viewing the asset properties is it displaying fine, no overlapping issue. Is there a solution to overcome this issue in the schema editor.

thanikon_0-1669876994010.png

Thanks

1 Accepted Solution

Avatar

Correct answer by
Employee Advisor

@thanikon
I was checking this on AEM On Prem, and now when I test it on AEM SDK, I face similar issue.

Appears to be a OOTB issue. I fixed it by updating css for following class ._coral-Textfield--multiline on the browser. I unchecked the auto height option.

You can overlay and apply your custom css to fix this.

krati_garg_1-1669987647275.png

Hope this helps

View solution in original post

10 Replies

Avatar

Employee Advisor

@thanikon 

I believe you must have created custom field for including Text Area in your metadata schema.

 

Can you please explain, how you have added Text Area on to your metadata Schema Form.

When overlaying for custom fields, we can also handle its rendering and fix overlapping issues with underlying Css 
Looking into below JSP, might fix the issue:

/dam/gui/coral/components/admin/schemaforms/formbuilder/v2/view.jsp

 

and the customfield.jsp

Avatar

Level 3

Thank you for the response @krati_garg .

We have overlay the schema form builditems.jsp alone. Rest of the things like view.jsp and clientlibs are serving from OOTB only. I have tried to overlayed the clientlibs but it is impacting the layout view.

Avatar

Employee Advisor

Please add the snippet, of custom code on builditems.jsp

@thanikon 

Avatar

Level 3

Thanks @krati_garg .Here is the path we have -

/apps/dam/gui/coral/components/admin/schemaforms/formbuilder/v2/builditems.jsp

and for the text area field we have code in jsp as:

<li class="field" data-fieldtype="text">
<div class="formbuilder-template-title"><coral-icon icon="text" alt="" size="M"></coral-icon><span><%= i18n.get("Multi Line Text") %></span></div>
<script class="field-properties" type="text/x-handlebars-template">
<sling:include resource="<%= fieldTemplateResource %>"
resourceType="dam/gui/coral/components/admin/schemaforms/formbuilder/formfields/v2/textareafield" />
</script>
</li>

Is this code snippet is sufficient or will i share the builditems.jsp file

Thanks.

Avatar

Employee Advisor

Above looks good. 
Can you please check the  granite:data/metatype value is set as textareafield (see the screen shot below)

Go to your 

/dam/gui/coral/components/admin/schemaforms/formbuilder/formfields/v2/textareafield/textareafield.jsp

 

krati_garg_0-1669912493435.png

 

Avatar

Level 3

Thanks @krati_garg . Even for my description property we have given metaType value as textarea in granite:data.

thanikon_0-1669959172397.pngthanikon_1-1669959188596.png

Avatar

Level 3

It is cloud service @krati_garg and i am using my local AEM SDK 8085 release version

Avatar

Correct answer by
Employee Advisor

@thanikon
I was checking this on AEM On Prem, and now when I test it on AEM SDK, I face similar issue.

Appears to be a OOTB issue. I fixed it by updating css for following class ._coral-Textfield--multiline on the browser. I unchecked the auto height option.

You can overlay and apply your custom css to fix this.

krati_garg_1-1669987647275.png

Hope this helps

Avatar

Level 3

Sure @krati_garg . Thanks for the response. I will overlay and add the custom css and see the issue will be fixed.