I've created custom module and added category selector in admin form. its work perfect and save values as well. but the problem is its not look like default category selector. I guess css is missing.

see screenshot of category selector of my module.

enter image description here

Here is screenshot of magento default selector.

enter image description here

Does anyone found this type of issue?

  • Update question with code which you used for category dropdown Commented May 20, 2017 at 7:39
  • 1
    @PrincePatel see code here github.com/kul3101/Category-Selector/tree/master/Test/Category/…
    – Kul
    Commented May 22, 2017 at 15:21
  • I have a feeling that you get a different view because the core uses ui-components and you build the form in php. But you can try to add in Test/Category/view/adminhtml/layout/test_category_category_edit.xml this <update handle="styles"/> at the top of the file, right inside the <page> tag.
    – Marius
    Commented Jun 13, 2017 at 8:11
  • @Marius Thanks. Its applied some css but still layout is broken for selector.
    – Kul
    Commented Jun 14, 2017 at 6:05
  • @Kul Have you found the soluntion of category tree css ? Commented Aug 2, 2017 at 6:27

2 Answers 2


add this code in your ui component form xml

<field name="parent">
    <argument name="data" xsi:type="array">
        <item name="options" xsi:type="object">Magento\Catalog\Ui\Component\Product\Form\Categories\Options</item>
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string" translate="true">Parent Category</item>
            <item name="componentType" xsi:type="string">field</item>
            <item name="formElement" xsi:type="string">select</item>
            <item name="component" xsi:type="string">Magento_Catalog/js/components/new-category</item>
            <item name="elementTmpl" xsi:type="string">ui/grid/filters/elements/ui-select</item>
            <item name="dataScope" xsi:type="string">data.parent</item>
            <item name="filterOptions" xsi:type="boolean">true</item>
            <item name="showCheckbox" xsi:type="boolean">false</item>
            <item name="disableLabel" xsi:type="boolean">true</item>
            <item name="multiple" xsi:type="boolean">false</item>
            <item name="levelsVisibility" xsi:type="number">1</item>
            <item name="sortOrder" xsi:type="number">20</item>
            <item name="required" xsi:type="boolean">true</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
            <item name="listens" xsi:type="array">
                <item name="${ $.namespace }.${ $.namespace }:responseData" xsi:type="string">setParsed</item>
  • I've not used Ui form you can see module code is also there on github
    – Kul
    Commented Jun 7, 2017 at 11:39

You need to define your selector as Ui component, because "category selector" official name is "Ui Select component".

You can take a look into this question (also answered by myself) Customise a custom product attribute input renderer in Magento 2 the right way

My advise for this is extend the ui-select to something like category-selectors, create your own knockout template...etc

For more information, take a look into this: http://devdocs.magento.com/guides/v2.0/ui-components/ui-secondary-uiselect.html

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.