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

Can I adjust the positioning of the spinning icon?

3 Answers 10 Views
AutoCompleteBox
This is a migrated thread and some comments may be shown as answers.
Yan Moura
Top achievements
Rank 1
Veteran
Iron
Yan Moura asked on 18 Feb 2021, 09:16 PM

It seems to be a bit 'picky' from the design perspective but here we go.

It's about the spinning icon that show up in the far right when the control is waiting for DB. I would like to adjust its position by moving it a few pixels to the left. Is this possible? There is a CSS attribute for this? If yes, which one?

Thanks!

3 Answers, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 23 Feb 2021, 03:22 PM

Hi Yan,

The AjaxLoadingPanel is rendered as a standard div element and its default width of is 100%. If you are using it as an update panel and you want to update a smaller element, you can set fixed size to the AjaxLoadingPanel which will move the loading icon to the left.

        <telerik:RadAjaxLoadingPanel ID="AjaxLoadingPanel1" runat="server" Skin="Metro"></telerik:RadAjaxLoadingPanel>
        <telerik:RadAjaxPanel runat="server" LoadingPanelID="AjaxLoadingPanel1" Width="600px">
            <div style="border: 2px solid red; width: 600px; height: 400px">
                <telerik:RadButton ID="Btn1" runat="server" Text="Show Ajax"></telerik:RadButton>
            </div>
        </telerik:RadAjaxPanel>

The other option is to use RadAjaxManager, which creates update panels only around the AjaxUpdatedControls, thys the loading panel image will be always centered over the updated control:

        <telerik:RadAjaxManager runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="Btn1" >
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="panel1" LoadingPanelID="AjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>

            </AjaxSettings>
        </telerik:RadAjaxManager>

        <telerik:RadAjaxLoadingPanel ID="AjaxLoadingPanel1" runat="server" Skin="Default"></telerik:RadAjaxLoadingPanel>
        <asp:Panel ID="panel1" runat="server" Width="600px" Height="400px" BackColor="Wheat">
            <telerik:RadButton ID="Btn1" runat="server" Text="Show Ajax"></telerik:RadButton>
        </asp:Panel>

Last but not least, you can also move the loading icon manually, but it will be always shown on the exacly the same position:

            .RadAjax div.raDiv {
                background-position: 200px center;
            }

Regards,
Vessy
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Yan Moura
Top achievements
Rank 1
Veteran
Iron
answered on 02 Mar 2021, 07:31 PM

Thank you Vessy!

I was working on some requests of functionality of AutoCompleteBox so I still didn't have time to check it. But I will very soon and will let you know.

 

:-)

0
Doncho
Telerik team
answered on 04 Mar 2021, 07:44 AM

Hi Yan,

Please take as much time as you need and let us know when you have information on the matter.

Kind regards,
Doncho
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
AutoCompleteBox
Asked by
Yan Moura
Top achievements
Rank 1
Veteran
Iron
Answers by
Vessy
Telerik team
Yan Moura
Top achievements
Rank 1
Veteran
Iron
Doncho
Telerik team
Share this question
or