Question

In magento 2 admin, I want to expandable textarea height using xml. How to do that?

I tried this code. But, it's not working.

<field name="comment">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">Comment</item>
                    <item name="formElement" xsi:type="string">textarea</item>
                    <item name="source" xsi:type="string">comment</item>
                    <item name="dataScope" xsi:type="string">comment</item>
                    <item name="cols" xsi:type="number">200</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
        </field>

Actual Result :

enter image description here

Expected Result :

enter image description here

Was it helpful?

Solution

To increase the height of text-area use <item name="rows" xsi:type="number">60</item> insted of <item name="cols" xsi:type="number">200</item>

But the above code is not working as expected and not increase the height of text-area because of Magento CSS issue. to check inspect element and find class .admin__control-textarea you can see css like below.

.admin__control-textarea {
   height: 8.48rem;
   line-height: 1.18;
   padding-top: .8rem;
   resize: vertical;
}

In the above CSS you can see CSS height: 8.48rem; just remove this CSS and see your code is working fine so reason for this CSS your code is not working.

To resolve the above issue try with below way :

Add item to your field <item name="additionalClasses" xsi:type="string">md_product_label_uploader</item> for add custom class to your field and apply custom CSS to this field and it will be working fine.

Note : This is default Magento bug I submitted an issue on GitHub.

I hope it helps!

Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top