How do i change Field With in UI Component Form in Admin Side. I used id to change the width but didn't worked.


<field name="percentage">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="additionalClasses" xsi:type="array">
                    <item name="admin__field-my-custom-class" xsi:type="boolean">true</item>
                <item name="resizeEnabled" xsi:type="boolean">true</item>
                <item name="resizeDefaultWidth" xsi:type="string">60</item>
                <item name="label" xsi:type="string">Percentage:</item>
                <item name="visible" xsi:type="boolean">true</item>
                <item name="dataType" xsi:type="string">price</item>
                <item name="formElement" xsi:type="string">input</item>
                <item name="source" xsi:type="string">flashsalespro</item>
                <item name="validation" xsi:type="array">
                    <item name="required-entry" xsi:type="boolean">true</item>

2 Answers 2


You can add this to the configuration of your field inside the <item name="config" xsi:type="array"> node.

<item name="additionalClasses" xsi:type="array">
    <item name="admin__field-my-custom-class" xsi:type="boolean">true</item>

And then you "css" your problems away by adding styles to the class admin__field-my-custom-class

  • what exactly does not work? Do you see the css class attached to your input or a parent element of the input?
    – Marius
    Feb 5, 2019 at 12:30

You have to override the default magento2 adminhtml theme and create your own theme and add a custom css file where you can adjust the styles of the adminhtml area.

So in your case it should be the styles in your custom.css

// change the width of the text field in catalog rule promotion adminthml ui form element  
.catalog-rule-promo-catalog-edit .admin__control-text {width:49%;}

To override the theme and add your styles you can check this post

  • why its not working with ID?
    – sudo55
    Feb 5, 2019 at 10:18
  • @AliEjaz as Marius pointed out you can add additionalClasses in your configuration file to style the UI components. BTW the method resizeDefaultWidth is not available for form UI components. Its available only for Listing Components like Grid, as far as i found in the docs.
    – Haijerome
    Feb 5, 2019 at 10:29

Your Answer

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

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