My page :
Click toolbar button , I use client script to open the window first. The button's postback is true, then on server side ,get data from database to update the detail panel. The Code works well.
But the FormDecorator can not apply to the textbox correctly. (see the attached file)
if I open the window by sending the javascript to client after update the detail panel on server side, the textbox display correctly.
but this is not I want , because I want the user can see the loading procedure.
any suggestion?
| <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="Textbox, Textarea,Buttons,Scrollbars" /> |
| <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> |
| <telerik:AjaxSetting AjaxControlID="toolbar"> |
| <UpdatedControls> |
| <telerik:AjaxUpdatedControl ControlID="pnlDetail" LoadingPanelID="rlpDefault" /> |
| </UpdatedControls> |
| </telerik:AjaxSetting> |
| </AjaxSettings> |
| </telerik:RadAjaxManager> |
| <telerik:RadAjaxLoadingPanel ID="rlpDefault" runat="server" /> |
| <telerik:RadToolBar ID="toolbar" runat="server" Width="100%" > |
| <%--- toolbar content ----%> |
| </telerik:RadToolBar> |
| <telerik:RadWindow ID="rwDetail" ...> |
| <ContentTemplate> <asp:Panel id="pnlDetail" runat="server"> |
| <asp:TextBox ID="tbxGridId" runat="server" Width="250px"></asp:TextBox> |
| <%--- other Content ---%> </asp:Panel> |
| </ContentTemplate> |
| <telerik:RadWindow> |
But the FormDecorator can not apply to the textbox correctly. (see the attached file)
if I open the window by sending the javascript to client after update the detail panel on server side, the textbox display correctly.
but this is not I want , because I want the user can see the loading procedure.
any suggestion?
1 Answer, 1 is accepted
0
Hello Nick,
The problem comes as RadFromDecorator inherits some styles form RadWindow. In CSS3 friendly browsers, we user border-radius property to create rounded corners. IE does not support that property and we apply a table around the element. In your case that table inherits some unwanted styles from RadWindow table. The solution is to set the RadFormDecorator table cell rules heavier, so they will be able to apply correctly:
You should add the yellow marked CSS in the head of your document.
Please, find attached rfdandrwfixed.gif showing the fixed problem, and rfdandrwunfixed.gif showing the case before the fix.
This fix will be included in our next release.
All the best,
Bojo
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
The problem comes as RadFromDecorator inherits some styles form RadWindow. In CSS3 friendly browsers, we user border-radius property to create rounded corners. IE does not support that property and we apply a table around the element. In your case that table inherits some unwanted styles from RadWindow table. The solution is to set the RadFormDecorator table cell rules heavier, so they will be able to apply correctly:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <script type="text/javascript"> function OpenWindow() { $find("rwDetail").show(); } </script> <style type="text/css"> .rfdRoundedWrapper tr td { vertical-align: middle; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="Textbox, Textarea,Buttons,Scrollbars" /> <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> <AjaxSettings> <telerik:AjaxSetting AjaxControlID="Button1"> <UpdatedControls> <telerik:AjaxUpdatedControl ControlID="pnlDetail" LoadingPanelID="rlpDefault" /> </UpdatedControls> </telerik:AjaxSetting> </AjaxSettings> </telerik:RadAjaxManager> <telerik:RadAjaxLoadingPanel ID="rlpDefault" runat="server" /> <asp:Button ID="Button1" runat="server" Text="Open Window" OnClientClick="OpenWindow();" /> <telerik:RadToolBar ID="toolbar" runat="server" Width="100%"> <%--- toolbar content ----%> </telerik:RadToolBar> <telerik:RadWindow ID="rwDetail" runat="server" VisibleOnPageLoad="false"> <ContentTemplate> <asp:Panel ID="pnlDetail" runat="server"> <asp:TextBox ID="tbxGridId" runat="server" Width="250px"></asp:TextBox> <%--- other Content ---%> </asp:Panel> </ContentTemplate> </telerik:RadWindow> </form></body></html>You should add the yellow marked CSS in the head of your document.
Please, find attached rfdandrwfixed.gif showing the fixed problem, and rfdandrwunfixed.gif showing the case before the fix.
This fix will be included in our next release.
All the best,
Bojo
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.