Visual issue with value template

[James]

Hello

I have noticed an issue when moving from 2017.3.1026 to 2018.1.221 which causes a dropdown  with a 'valueTemplate' to be drawn oddly as if it is trying to draw blank line above the value.

I enclose a couple of images of how it looks now and how it looked before.

I have looked at the docs and I cannot see if I need to change the format of the 'valueTemplate'

Any suggestions would be appreciated.

Thanks

James

here is some sample code:

 <input id="dropdownlist" />
<script>
$("#dropdownlist").kendoDropDownList({
  dataSource: [
    { id: 1, name: "Apples", txtColor: "black", bkgColor: "lightblue" },
    { id: 2, name: "Oranges", txtColor: "black", bkgColor: "slateblue" },
    { id: 3, name: "Pears", txtColor: "black", bkgColor: "lightgreen" }
  ],
  dataTextField: "name",
  dataValueField: "id",
  template: '<div style="color: #= txtColor #; background-color: #= bkgColor #;">#= name #</div>',
  valueTemplate: '<div style="color: #= txtColor #; background-color: #= bkgColor #;">#= name #</div>'
});
</script>

[Joana]

Hi James,

The rendering of the DropDownList has been modified in 2018 R1. Indeed, there is a visual glitch when block element is used in a valueTemplate. The  change was required for styling purposes.

We suggest that you use span instead of div or you could use the following workaround.

<style>
    .k-dropdown-wrap .k-input:before {
      display: inline !important;
    }
</style>

Let me know if you have further questions.

Regards,
Joana
Progress Telerik

[James]

Hi Joana

Thanks that did the trick. 

Kind regards

James