k-animation-container

[Marc]

Is there anyway to overwrite the default styles for this class? I have a stylesheet which includes

 

.k-animation-container {
width: 500px;
max-height: 50%;
overflow: scroll;
}

 

but it is overwritten by something inside Kendo.

I need my validation lists in my spreadsheet to be wider, and it's not possible if the container element has its width set by something inside the Kendo framework.

Thanks!

[Dimo]

Hello Marc,

All k-animation-container elements have inline dimension styles. These can be overridden by external styles if "!important" is used.

.k-animation-container {
   width: 500px !important;
}

However, the above rule will influence all Kendo UI popups, so its usage like this is not recommended. What I can suggest is to detect clicks on dropdown buttons in the Spreadsheet and apply custom styles only to the correct popup on the fly:

$("#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);
  }
});

Here is an example, check the last column.

http://dojo.telerik.com/uNADe


Currently these list popups do not have a unique CSS class or identifier that will allow customization via CSS only. If you submit a feature request on our feedback portal, other developers will be able to vote for it, so we can measure the demand and prioritize. Thank you.

Regards,
Dimo
Telerik by Progress