FF 52 and Chrome58 seem to have started reading some CSS from 2010 differently. This affects controls such as RadMenu, RadTreeView, RadPanelBar, RadEditor, RadListBox, RadTabStrip that are in the ContentTemplate of a RadWindow. The issue can manifest as bad element alignment or extra padding. Internal fix will be available as of R2 2017. There are two workarounds: - use the Lightweight Render Mode (helps in some cases) - add a CSS override similar to the following /* FireFox 52+ and Chrome 58+ */ html:first-child .RadWindowFixed ul { float: none !important; } <telerik:RadWindow ID="RadWindow2" runat="server" Title="Rad Window with RadTreeView - Fixed" Width="400px" MinWidth="230px" MaxWidth="600px" CssClass="RadWindowFixed" Height="610px" VisibleOnPageLoad="true" Behaviors="Minimize, Move, Maximize, Resize" VisibleStatusbar="false" KeepInScreenBounds="true" Left="406">
Most notable issues - Metro skin does not show the correct (blue) color. For a timeline and status updates for the Lightweight mode follow https://feedback.telerik.com/Project/108/Feedback/Details/216601-wrong-titlebar-colors-in-metro-and-metrotouch-skins-in-lightweight-rendermode - RTL mode does not order the buttons properly Workarounds for both: /*lightweight mode*/ .RadWindow_Metro div.rwTitleBar, .RadWindow_MetroTouch div.rwTitleBar { background-color: #25a0da; } /* if you want all the borders blue */ div.RadWindow_Metro, div.RadWindow_MetroTouch { border-color: #25a0da; background-color: #25a0da; } .rwRtl .rwCommands li.rwListItem { float: right; } /* classic mode- metro skin color issue*/ div.RadWindow_Metro .rwTitleRow { background-color: #25a0da; }
When you create a dynamic tooltip that loads its content from a service (http://demos.telerik.com/aspnet-ajax/tooltip/examples/radtooltipmanagerclientapi/defaultcs.aspx), its height is 100% while the loading takes place. You can workaround this issue by configuring a small initial height for the tooltip (for example 50px), then using the following script to change its height according to the loaded content: <telerik:RadToolTipManager runat="server" OnClientResponseEnd="onClientResponseEnd" Height="50px" > ... </telerik:RadToolTipManager> <script> function onClientResponseEnd() { var current = Telerik.Web.UI.RadToolTip.getCurrent(); if (current) { var height = $telerik.getBounds(current.get_contentElement()).height; current.set_height(height); } } </script>
The control RadWindow render his element with incorrect names of css classes: like he rendered rwTitleBar instead of rwTitlebar, and rwStatusBar instead of rwStatusbar this bug is produced only when i use a custom theme. please if you have a solution bring that.
The issue does not manifest with iOS9 or the Classic RenderMode
A custom icon is replaced with the default icon in the LightWeight renderMode. For the time being the custom icon can be forced by using the OnClientShow event of the control: function OnClientShow(sender) { sender.set_iconUrl(sender.get_iconUrl()); }
To get the RadWindow to center properly, you need to use its OnClientAutoSizeEnd event and call its center() method: This issue affects only the Q1 2016 SP1 release. <script> function OnClientAutoSizeEnd(sender, args) { sender.center(); } </script> <telerik:RadWindow ID="RadWindow1" runat="server" OpenerElementID="Button1" AutoSize="true" Modal="true" OnClientAutoSizeEnd="OnClientAutoSizeEnd"> <ContentTemplate> <div style="width: 600px; height: 400px; background: yellow;">dummy content for autosizing</div> </ContentTemplate> </telerik:RadWindow> <asp:Button ID="Button1" Text="open RW" runat="server" />
When a textbox is focused pressing enter will have the browser click the first available button in the form, which is, in this case the first command button from the RadWindow. If the only available command button is Close the RadWindow will close. Pressing enter with a textbox focused fires the next button on the form (you can see this with a simple textbox and button without anything special at all) and the page will be posted): <asp:TextBox ID="Textbox2" runat="server" /> <button onclick="alert(2);" id="testButton">test button</button> Since the RadWindow is the first thing rendered in a form the first button from its titlebar gets fired when the textbox is inside its ContentTemplate and enter is pressed. One of the most suitable workarounds is to add a Pin button and cancel the Pin command: function OnClientCommand(sender, args) { if (args.get_commandName() == "Pin") { args.set_cancel(true); $telerik.$(".rwPinButton", sender.get_popupElement()).blur(); } } where this is attached to the OnClientCommand event of the RadWindow: <telerik:RadWindow ID="RadWindow1" runat="server" OpenerElementID="Button1" RenderMode="Lightweight" Behaviors="Pin, Move, Close" OnClientCommand="OnClientCommand"> <ContentTemplate> <asp:TextBox ID="Textbox1" runat="server" /> </ContentTemplate> </telerik:RadWindow> <asp:Button ID="Button1" Text="open the RadWindow" runat="server" />
The icon shown in the predefined dialogs can be changed with an argument that points to the new image as shown in this demo: http://demos.telerik.com/aspnet-ajax/window/examples/browserdialogboxes/defaultcs.aspx. This does not work with RenderMode=Lightweight
Currently when external content is loaded in RadWindow, scollbars appear in the content and the control is dragged, the position of the scrollbars will be reset in IE10. The attached sample demonstrates a workaround for this issue.
When a RestrictionZone is used, under Chrome for iOS7, the first time an input inside a RadWindow is tapped it cannot get focus. This means that its onfocus event does not fire and the user cannot type in it even though the keyboard was shown. When another input is focused things start working properly. A way to avoid this is to remove the RestrictionZone property. You can also remove the restriction zone for mobile devices to include chrome function OnClientShow(sender, args) { if ($telerik.isTouchDevice) { sender.set_restrictionZoneID(""); } }
This causes some empty space to remain at the bottom of the dialog. Possible workarounds are: - set the VIsibleStatusbar property of the RadWIndowManager to false, if all your RadWindows need no statusbar; or at least to the concrete instance. - OR, use the following script that will improve hiding the status bar element and resizing the content: oWnd = window.radopen(pageURL, winName); //will work for classic rendermode oWnd.set_visibleStatusbar(false); //will work for lightweight. In classic jQuery will not throw exceptions because of the element it cannot find $telerik.$(".rwStatusBar", oWnd.get_popupElement()).hide(); var contentElem = $telerik.$(".rwContent.rwExternalContent", oWnd.get_popupElement()); contentElem.height(contentElem.height() + 20);
The problem with adding such an overlay is that it cannot be transparent, or it will not work. If it is added, the content of the main page will be invisible behind a modal popup. It can be implemented via an additional property (that will default to false) should the effect be acceptable to the developer. Add a vote and/or a comment in favor or against such an option. A possible solution is setting the visibility CSS attribute of the embedded elements to hidden with a JavaScript function attached to the OnClientBeforeShow event of the RadWindow, and reverting it to its initial value with the OnClientClose hander. To ease these elements' collection they are going to use the shouldBeDisabled CSS class for this example: function OnClientBeforeShow(sender, args) { if (sender.isModal()) { var elements = $telerik.$(".shouldBeDisabled"); var arrLength = elements.length; var element; for (var i = 0; i < arrLength; i+=1) { element = elements[i]; element.style.visibility = "hidden"; } } } function OnClientClose(sender, args) { if (sender.isModal()) { var elements = $telerik.$(".shouldBeDisabled"); var arrLength = elements.length; var element; for (var i = 0; i < arrLength; i += 1) { element = elements[i]; element.style.visibility = "initial"; } } }
A simple workaround is to add the needed border via CSS: .RadWindow.rwNoTitleBar { padding-top: 0.5em; }
There are two workarounds: - set the EnableShadow property in the markup - OR, for Lightweight RenderMode, add a CSS class: <telerik:RadWindow ID="RadWindow_MyInfo" runat="server" RenderMode="Lightweight"></telerik:RadWindow> <asp:Button ID="Button1" Text="show wnd" OnClientClick="test(); return false;" runat="server" /> <script> function test() { var myinfo = $find('<%=RadWindow_MyInfo.ClientID%>'); myinfo.setUrl("../Dialogs/MyInfo.aspx"); myinfo.set_enableShadow(true); myinfo.show(); $telerik.$(myinfo.get_popupElement()).addClass("rwShadow"); } </script>
The easiest workaround is to remove the overlay (e.g., set the Overlay property to false or call the set_overlay(false) client-side method). In most cases an overlay is not needed, as it is used only for showing the popup over heavyweight objects like PDFs, Flash or Java applets: http://www.telerik.com/support/kb/aspnet-ajax/window/details/control-is-shown-behind-a-heavy-weight-object-(pdf-flash-activex-etc)