RadAjaxManager panel around textbox with Bootstrap 5 Floating Labels

2 Answers 32 Views
Ajax AjaxPanel Input
Dana Cobb
Top achievements
Rank 1
Iron
Dana Cobb asked on 26 Jun 2022, 10:40 PM

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

2 Answers, 1 is accepted

Sort by
0
Accepted
Peter Milchev
Telerik team
answered on 29 Jun 2022, 11:17 AM

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

The Premier Dev Conference is back! 

Coming to you live from Progress360 in-person or on your own time, DevReach for all. Register Today.


0
Dana Cobb
Top achievements
Rank 1
Iron
answered on 29 Jun 2022, 01:37 PM

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

Tags
Ajax AjaxPanel Input
Asked by
Dana Cobb
Top achievements
Rank 1
Iron
Answers by
Peter Milchev
Telerik team
Dana Cobb
Top achievements
Rank 1
Iron
Share this question
or