1

I have added a WYSIWYG field in my custom admin form but it's taking the full width of the form instead of matching other fields width.

Here is the screen-shot

Here is what I am using for this in ui_component

<field name="description">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string" translate="true">Job Description</item>
                    <item name="formElement" xsi:type="string">wysiwyg</item>
                    <item name="source" xsi:type="string">job</item>
                    <item name="wysiwyg" xsi:type="boolean">true</item>
                    <item name="sortOrder" xsi:type="number">130</item>
                    <item name="dataScope" xsi:type="string">description</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
        </field>
4

I made it work as the way I wanted. Just added text field with WYSIWYG enabled.

<field name="description">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="formElement" xsi:type="string">wysiwyg</item>
                    <item name="source" xsi:type="string">job</item>
                    <item name="label" xsi:type="string">Job Description</item>

                    <item name="template" xsi:type="string">ui/form/field</item>
                    <item name="wysiwyg" xsi:type="boolean">true</item>
                    <item name="dataScope" xsi:type="string">description</item>
                    <item name="sortOrder" xsi:type="number">130</item>
                    <item name="rows" xsi:type="number">8</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
        </field>
2

Magento2 admin forms evolve and a given answer is not perhaps the best for the latest version.

In 2.3.x the crucial part is template:

    <field name="description" formElement="wysiwyg" template="ui/form/field" sortOrder="80">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="source" xsi:type="string">Fabric</item>
            </item>
        </argument>
        <settings>
            <validation>
                <rule name="required-entry" xsi:type="boolean">false</rule>
            </validation>
            <label translate="true">Description</label>
            <dataScope>description</dataScope>
        </settings>
        <formElements>
            <wysiwyg>
                <settings>
                    <wysiwyg>true</wysiwyg>
                </settings>
            </wysiwyg>
        </formElements>
    </field>
2
  • Still the width issue is not resolved :(
    – ANKIT
    Jan 13 '20 at 10:02
  • That should be the accepted answer!
    – Creepin
    Feb 1 at 16:42
0

In order to display wysiwyg Ui Component smaller, You will require to add a Template into Field Tag like this:

template="ui/form/field

Here's the how you can use it.

<field name="ad_description" template="ui/form/field" sortOrder="50" formElement="wysiwyg">

I've tried in Magento 2.4 in Admin Ui Form.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.