Solve warning "User Agent Exception override product and CMS pages rules"

Question

I'm Trying to create a dynamic grid containing multiple fields using this code in my ui_component

<fieldset name="multi_answer">
<settings>
    <collapsible>true</collapsible>
    <label translate="true">Add Answers</label>
</settings>
<container name="multi_ans_holder">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Ui/js/dynamic-rows/dynamic-rows</item>
            <item name="template" xsi:type="string">Magento_Backend/dynamic-rows/grid</item>
            <item name="componentType" xsi:type="string">dynamicRows</item>
            <item name="recordTemplate" xsi:type="string">record</item>
            <item name="deleteButtonLabel" xsi:type="string">Remove</item>
            <item name="addButtonLabel" xsi:type="string">Add New</item>
            <item name="deleteProperty" xsi:type="boolean">false</item>
            <item name="dndConfig" xsi:type="array">
                <item name="enabled" xsi:type="boolean">false</item>
            </item>
        </item>
    </argument>
    <container name="record">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="component" xsi:type="string" translate="true">Magento_Ui/js/dynamic-rows/record
                </item>
                <item name="isTemplate" xsi:type="boolean">true</item>
                <item name="is_collection" xsi:type="boolean">true</item>
                <item name="showFallbackReset" xsi:type="boolean">false</item>
            </item>
        </argument>
        <field name="answer_id">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="visible" xsi:type="boolean">false</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">faq</item>
                </item>
            </argument>
        </field>
        <field name="answer">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string">Answer:</item>
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="formElement" xsi:type="string">textarea</item>
                    <item name="source" xsi:type="string">faq</item>
                </item>
            </argument>
        </field>
        <field name="answer_author">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string">Author:</item>
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">faq</item>
                </item>
            </argument>
        </field>
        <field name="answer_status" formElement="checkbox">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">homeslider</item>
                    <item name="default" xsi:type="number">1</item>
                </item>
            </argument>
            <settings>
                <dataType>boolean</dataType>
                <label translate="true">Enable FAQ:</label>
                <dataScope>answer_status</dataScope>
            </settings>
            <formElements>
                <checkbox>
                    <settings>
                        <valueMap>
                            <map name="false" xsi:type="number">0</map>
                            <map name="true" xsi:type="number">1</map>
                        </valueMap>
                        <prefer>toggle</prefer>
                    </settings>
                </checkbox>
            </formElements>
        </field>
        <actionDelete>
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="componentType" xsi:type="string">actionDelete</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="fit" xsi:type="boolean">false</item>
                    <item name="label" xsi:type="string">Actions</item>
                    <item name="additionalClasses" xsi:type="string">data-grid-actions-cell</item>
                    <item name="template" xsi:type="string">Magento_Backend/dynamic-rows/cells/action-delete
                    </item>
                </item>
            </argument>
        </actionDelete>
    </container>
</container>

This code Creates the required grid but shows warning

"User Agent Exception override"

I'm new to magento and I need help to solve this warning

Answer 1

It is because of the template that you are using in config:

<item name="template" xsi:type="string">Magento_Backend/dynamic-rows/grid</item>

If you open this template file you can see the html for the warnings and user agent rules. Path for the file:

vendor/magento/module-backend/view/adminhtml/web/template/dynamic-rows/grid.html

To remove this you can use template from your custom module. Copy the core file grid.html in

Vendor/Module/view/adminhtml/web/template/dynamic-rows

and remove div with class:

"admin__field-complex-title", "admin__field-complex-content" and "messages"

So "admin__field-complex" div will look like this:

<div class="admin__field-complex" if="element.addButton">
<div class="admin__field-complex-elements">
    <render args="fallbackResetTpl" if="$data.showFallbackReset && $data.isDifferedFromDefault"/>
    <button attr="{disabled: disabled}"
            class="action-secondary"
            type="button"
            click="processingAddChild.bind($data, false, false, false)">
        <span translate="addButtonLabel"/>
    </button>
</div></div>

Then, specify the path in the config item in your ui_component like this:

<item name="template" xsi:type="string">Vendor_Module/dynamic-rows/grid</item>