Kendo Multi Select dropdown, selected items not appearing with in the text.

[Jyothi]

Hi,

I took an example from kendo website (from stackblitz) and tried it. 

Overview - MultiSelect - Kendo UI for Angular (telerik.com)

For some reason

1. The dropdown input box  is very small. Not able to adjust the size.

2. Upon selection, the selected item is appearing above the dropdonText Box.

Here is the html, pretty much from the website

<form [formGroup]="myForm">
   <div class="example-config">
     The form.gender value is: <strong>{{ myForm.controls.gender.value | json }}</strong>
   </div>
   <p>Select Gender:</p>
   <kendo-multiselect
       formControlName="gender"
       [data]="genders"
       [textField]="'text'"
       [valueField]="'value'"
       [valuePrimitive]="true"  
       #gender        
   >
   </kendo-multiselect>
 </form>

[Ivo]

Hi Jyothi,

Looking at the provided screenshot, it seems as if the CSS has not been loaded.

Please make sure that a Kendo Theme is loaded. If a Kendo Theme is loaded, the component should look as the one in this Stackblitz example.

Also, please have in mind that the Kendo UI for Angular packages (Buttons, Inputs, DropDowns, DateInputs and TreeView) received major rendering changes, which require updating the components to the latest version:

https://www.telerik.com/kendo-angular-ui/components/installation/up-to-date/

And the latest version of our components require the latest version (v5) of Kendo Themes to be used.

Let us know in case additional information is needed.

Regards,
Ivo
Progress Telerik