You can apply the rule overflow-x: hidden
to a particular RadDocks by creating a specific CSS class that contains the rule and setting this class in the CssClass
property of the dock control. The code snippets below demonstrates the suggested approach:
You can calculate the size of the usable inside portion of the RadDock by utilizing the client method of the telerik static client library getSize
to get the width and the height of the dock's HTML element. Then you should subtract the 7 pixels for every edge of the RadDock and 27 pixels for the title bar. These sizes are static and their values are always the same. The script, implementing the described calculations, is shown below:
dock = $find(
dockSize = $telerik.getSize(dock.get_element());
dockWidth = dockSize.width;
dockUsableWidth = dockWidth - 2 * dockEdge;
dockHeight = dockSize.height;
dockUsableHeight = dockHeight - (dockEdge + dockTitleHeight);
"Inner area has width "
+ dockUsableWidth +
"px and height "
+ dockUsableHeight +
In case your RadDock is resizable and you want to change the size of the RadChart control along with the dock, you can achieve this only through the pageLoad
client method, without the need to calculate the usable area of the RadDock every time. For more information on the matter, please check this Code Library article
, containing updated example of the described scenario.
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed