Ajaxified element gains adjacent blank space before first postback

[Rodrigo Selada]

Hi!

I've noticed that when I have an ajaxified ASP.Net TextBox next to some characters, the Textbox will insert a space before the adjacent characters. Right after the first ajaxified postback, the space disappears. This makes my UI to move a space to the side when the user provokes the first partial postback.

Code example here:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" UpdatePanelsRenderMode="Inline">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Button1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="txtRecord" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <asp:Button ID="Button1" runat="server" Text="Button" />
    <asp:TextBox ID="txtRecord" runat="server" Width="22px" Text="0" />|
    <%-- !!! Atention to the vertical bar right after the textbox! !!!--%>

How can I make the space introduced by the rendered div panel of the ajaxification disappear?


Regards,

Rodrigo S.

[Rodrigo Selada]

Has anyone lived this issue and can anyone give me a clue?

[Pavlina]

Hello Rodrigo,

In order to achieve the desired functionality, please examine the code snippet bellow and let me know if it helps.
ASPX:

   <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" UpdatePanelsRenderMode="Inline">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="Button1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="txtRecord" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <asp:Button ID="Button1" runat="server" Text="Button" />
        <div class="myContainer" style="width: 200px">
            <asp:TextBox ID="txtRecord" runat="server" Width="22px" Text="0" />
            <span class="otherContent">|</span>
        </div>

CSS:

   <style type="text/css">
        .myContainer > div, .myContainer .otherContent
        {
            float: left;
        }
    </style>

Best wishes,
Pavlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.