This is a migrated thread and some comments may be shown as answers.

k-animation-container

1 Answer 1671 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Marc
Top achievements
Rank 1
Marc asked on 13 Mar 2017, 04:43 PM

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!

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 15 Mar 2017, 08:31 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
General Discussions
Asked by
Marc
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or