Can I adjust the positioning of the spinning icon?

[Yan Moura]

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!

[Vessy]

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

[Yan Moura]

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.

 

:-)

[Doncho]

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