Overriding !important rule in a CSS property style
Environment
| Product | Telerik UI for ASP.NET AJAX |
Description
How to override an !important rule using JavaScript?
For example, if you have a CSS class like the following one
.RadCalendarPopup{
z-index: 300000 !important;
}
and you want to override the !important property, there are a couple of simple JS techniques to specify the important property via the setAttribute, cssText and setProperty JavaScript methods. See them in action with examples in the Solution section below.
Solution
Solution 1 - Using the setAttribute approach:
<style>
.RadCalendarPopup {
z-index: 300000 !important;
}
</style>
<script>
function popupOpening(sender, args) {
var popup = args.get_popupControl();
setTimeout(function () {
popup.get_element().parentElement.setAttribute('style', 'z-index: 103000 !important');
});
}
</script>
<telerik:RadDatePicker RenderMode="Lightweight" ID="RadDatePicker2" runat="server">
<ClientEvents OnPopupOpening="popupOpening" />
</telerik:RadDatePicker>
Solution 2 - Via the style.cssText property:
<script>
function popupOpening(sender, args) {
var popup = args.get_popupControl();
setTimeout(function () {
popup.get_element().parentElement.style.cssText = 'z-index: 103000 !important';
});
}
</script>
<telerik:RadDatePicker RenderMode="Lightweight" ID="RadDatePicker2" runat="server">
<ClientEvents OnPopupOpening="popupOpening" />
</telerik:RadDatePicker>
Solution 3 - Through the element.style.setProperty(propertyName, value, priority) method:
<script>
function popupOpening(sender, args) {
var popup = args.get_popupControl();
setTimeout(function () {
popup.get_element().parentElement.style.setProperty('z-index', '103000', 'important');
});
}
</script>
<telerik:RadDatePicker RenderMode="Lightweight" ID="RadDatePicker1" runat="server">
<ClientEvents OnPopupOpening="popupOpening" />
</telerik:RadDatePicker>