Completed
Last Updated:
28 Jul 2015 08:44
by ADMIN
ADMIN
Danail Vasilev
Created on:
05 Jun 2015 13:10
Category:
FormDecorator
Type:
Bug Report
RadFormDecorator doesn't style scrolbars in Chrome
The issue is reproducible when you add a CSS class, responsible for styling the scrollbars, too lately and can also be reproduced on a page that contains no Telerik UI for ASP.NET AJAX controls:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
.RadForm.rfdScrollBars.RadForm_WebBlue div::-webkit-scrollbar,
.RadForm.rfdScrollBars.RadForm_WebBlue div::-webkit-scrollbar-thumb:vertical,
.RadForm.rfdScrollBars.RadForm_WebBlue div::-webkit-scrollbar-thumb:horizontal {
background-color: red !important; /* choose your color */
}
</style>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
<script>
setTimeout(function () {
Sys.UI.DomElement.addCssClass(document.documentElement, "RadForm RadForm_WebBlue rfdScrollBars");
}, 10);
</script>
<div id="testDiv" style="overflow: scroll; height: 200px; width: 300px">
<table>
<tr style="height: 500px;">
<td></td>
</tr>
</table>
</div>
</form>
</body>
</html>
If you remove the timeout, however, the issue will be gone:
<script>
// setTimeout(function () {
Sys.UI.DomElement.addCssClass(document.documentElement, "RadForm RadForm_WebBlue rfdScrollBars");
// }, 10);
</script>
Possible workarounds for scenarios when the RadFormDecorator control is involved:
1) Remove the scorllbars styling by setting the ControlsToSkip property to "Scrollbars".
<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" ControlsToSkip="Scrollbars" />
2) Use the following JavaScript workaround:
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
<telerik:RadSkinManager ID="RadSkinManager1" runat="server" Skin="Glow"></telerik:RadSkinManager>
<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" ControlsToSkip="Scrollbars" />
<script>
//JavaScript workaround:
Telerik.Web.UI.RadFormDecorator.removeGlobalClassesToRootElement = function (rootElement) {
rootElement.className = rootElement.className.replace(/rfdRtl|RadForm_\w+|rfdButton|rfdZone|rfdLabel|rfdHeading|rfdTextbox|rfdTextarea|rfdFieldset|rfdRadio|rfdCheckbox|rfdGrids/g, "").trim();
};
Sys.UI.DomElement.addCssClass(document.documentElement, "RadForm RadForm_<%=RadSkinManager.GetCurrent(this.Page).Skin%> rfdScrollBars");
</script>
<div id="testDiv" style="overflow: scroll; height: 200px; width: 300px">
<table>
<tr style="height: 500px;">
<td></td>
</tr>
</table>
</div>
</form>
0 comments