Magento2: Category selector design doesn't look like default in custom module

Question

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?

• Prince Patel: Update question with code which you used for category dropdown
• Kul: @PrincePatel see code here github.com/kul3101/Category-Selector/tree/master/Test/Category/…
• Marius: 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.
• Kul: @Marius Thanks. Its applied some css but still layout is broken for selector.
• Dinesh Yadav: @Kul Have you found the soluntion of category tree css ?

Answer 1

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>
 <item name="listens" xsi:type="array">
 <item name="${ $.namespace }.${ $.namespace }:responseData" xsi:type="string">setParsed</item>
 </item>
 </item>
 </argument>
</field>

• Kul: I've not used Ui form you can see module code is also there on github

Answer 2

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