RadAjaxManager panel around textbox with Bootstrap 5 Floating Labels

[Dana Cobb]

If I attempt to ajaxify an asp.net textbox using RadAjaxManager, obviously, a div with a RadAjaxPanel class surround the div with the "form-floating" class.

When that situation occurs the placeholder duplicates 11px above the current one. In addition, when you put the cursor in the textbox field, the floating label doesn't "float". It remains where it is and conflicts with the newly entered text in the textbox.

 

Any suggestions?

Dana

[Peter Milchev]

Hello Dana,

The floating label seems to work when the form-floating wrapper element is a direct parent of the input. As the AjaxManager is wrapping the control in a div AjaxPanel, the Bootstrap logic cannot achieve the correct functionality.

A possible solution would be to wrap the TextBox in an asp:Panel and add the panel to the AjaxSettings:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="TextBox1Panel">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="TextBox1Panel" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<asp:Panel runat="server" ID="TextBox1Panel" CssClass="form-floating mb-3">
    <asp:TextBox runat="server" CssClass="form-control" ID="Textbox1" placeholder="hint"></asp:TextBox>
    <label for="Textbox1">Email address</label>
</asp:Panel>

 

Regards,
Peter Milchev
Progress Telerik

[Dana Cobb]

Thanks for getting back to me. 

Woo Hoo!!!! Love it thank you, thankyou, thank you.

When you see it in your mind a certain way, compromising is tough!

Thanks to you, I don't have to.

 

Dana