Affan Sheikh
Affan Sheikh

Reputation: 145

Kendo dropdown with template containing list element generate different HTML for Chrome

I am using Kendo dropdown list control with template. This template contains list element with checkbox input like this:

<li class="k-item nowrap check-item">
<input type="checkbox" name="#= Name #" value="#= Name #" class="my-check-input" /><span> #= Name #</span>
</li> 

But in Chrome latest update, when the data source of this dropdown is set its HTML not generating correctly as previously where as its works fine in Firefox.

Here is the generated HTML:

enter image description here

The list element in the below HTML with attribute role = "option" must not be the parent of the inside list element but it needs to be added as a sibling.

Upvotes: 0

Views: 97

Answers (1)

Rai Hassan
Rai Hassan

Reputation: 562

<li class="k-item nowrap check-item" role="option">
  <input type="checkbox" name="#= Name #" value="#= Name #" class="my-check-input" />
  <span>#= Name #</span>
</li>

By directly adding the role="option" attribute to the li element that wraps the checkbox and the text, you ensure that the role attribute is properly placed as a sibling of the checkbox input as well.

This code will work fine.

Please note that Kendo UI might receive updates over time, so it's a good idea to check their official documentation

Upvotes: 1

Related Questions