kendo ui - override k-animation-container style for one dropdown only

Question

I use kendo-ui dropdown. I add some ovveriding-css, and it works well.

.k-animation-container {
//this is popup that is html is rendered out of the page element
//so it cannot be selected by id / panaya class / panaya element

.k-popup.k-list-container {
    .k-item,
    .k-item.k-state-selected,
    .k-item.k-state-focused {
        background-color: transparent;
        color: $darken-gray-color;
        margin-left: 0;
        margin-top: 0;
    }
  }
}

The problem is, that while each dropdown has other input element instance, the list has one instance that is hidden and when you click any combo - is shown near the currently clicked combo. What say - when you ovveride the list-container style - dows it for all of the combooxes. Is there any solution for this issue?

Answer 1

Well this is a known problem, for every popup kendo renders independent div with class k-animation-container

You can try with this solution suggested on telerik forum: k-animation-container

$("#spreadsheet").on("click", ".k-spreadsheet-editor-button", function(e) {
  var animationContainer = $(".k-animation-container").last();
  // use some custom conditional statement that will determine if this is the correct list popup, e.g. check what's inside the popup
  if (true) {
      animationContainer.children(".k-popup").css("min-width", 200);
  }
});

Didn't try it my self, gl.

Answer 2

My team find a great solution:

There is an option to give the input-element custom id. Then you can select the list-container by the custom id you gave +'list' str.

Now, if you want to get the k-animation-container, you can select the list element and then request its parent.

Code sample:

The input element:

 <span
            kendo-multi-select
            id="my-type-dd"
            k-options="$ctrl.getVMultySelectConfig()"
            k-ng-model="$ctrl.selectedTypes"
        ></span>

Selectors:

If you need only the k-list-container and not must the k-animation-container, you can do that by css:

.k-animation-container #my-type-dd-list {
//this is popup that is html is rendered out of the page element
//the id is the id you give to the element + '-list'

&.k-popup.k-list-container {
    padding: $space-normal 0 $space-small $space-small;
    box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.1);
 }
}

If you need the k-aniamation-container you need to select it by jQuery becouse css doesn't have parent selector:

var kAnimationElement = $("#my-type-dd-list").parent();

Answer 3

One solution I found was to use

popup: {
   appendTo: $(some parent with ID)
}

This way we can manipulate styling of that particular .k-animation-container. But this doesn't work on every widget, unfortunately.