2

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>
asked Jun 21, 2017 at 6:49

3 Answers 3

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>
answered Jul 23, 2017 at 6:04
3

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>
answered Nov 5, 2019 at 22:45
2
  • Still the width issue is not resolved :( Commented Jan 13, 2020 at 10:02
  • That should be the accepted answer! Commented Feb 1, 2021 at 16:42
1

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.

answered Feb 10, 2021 at 5:47

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.