This is a migrated thread and some comments may be shown as answers.

problem about textbox display?

1 Answer 56 Views
FormDecorator
This is a migrated thread and some comments may be shown as answers.
Nick Wu
Top achievements
Rank 1
Nick Wu asked on 29 May 2010, 10:19 AM
My page :

 <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>   
       
 
 
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?

1 Answer, 1 is accepted

Sort by
0
Bozhidar
Telerik team
answered on 03 Jun 2010, 09:10 AM
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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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.
Tags
FormDecorator
Asked by
Nick Wu
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
Share this question
or