Design issue with RadAjaxLoadingPanel in Firefox

[Jyoti]

Hi,

I am using RadAjaxLoadingPanel.
Their is some design issue with LoadingPanel in firefox.
It is working fine in IE.
When i set LoadingPanel with Grid then it is loaded at the left side of grid rather then in centre.
When i set padding to make centre its position then it will affect in IE .
I also tried with property of Backgroundposition="centre" of RadAjaxLoadingPanel but that not have any affect.
Please help me ASAP.

Thanks in Advance
Regards
Jyoti Khurana

[Dimo]

Hello Jyoti,

The BackgroundPosition property applies to the case when you are using RadAjaxLoadingPanel with a skin, which I suspect is not the case - you are using a template, right?

In this case the problem is that are not applying the correct styles, which would center the loading image.

http://www.telerik.com/community/code-library/aspnet-ajax/ajax/how-to-center-image-in-a-radajaxloadingpanel.aspx

Regards,
Dimo
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

[Basel Nimer]

Hello Dimo,

I have a similar case where the Panel itself shifts, not the image, please see attached.


the code i use is:

    <telerik:RadAjaxLoadingPanel ID="LoginLoading" runat="server" Skin="Hay"  BackColor="red" >
        <span style="color:Red;">...</span>
    </telerik:RadAjaxLoadingPanel>

[Dimo]

Hello Basel,

This problem is probably caused by some margin or positioning styles applied to the updated control. If you send us simple runnable page, which exhibits the problem, we will investigate the exact cause and provide a workaround.

All the best,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Basel Nimer]

the Ajax panel only contains a grid (and a script),
  

<telerik:RadAjaxPanel ID="ActionAjax" runat="server" LoadingPanelID="LoginLoading" ClientEvents-OnRequestStart="OnRequestStart">

        <script type="text/javascript">
            function RowSelecting(sender, eventArgs)
            {
                var e =  eventArgs.get_domEvent();
                var targetElement = e.srcElement || e.target;
                if(targetElement.tagName.toLowerCase() == "input")
                {
                    eventArgs.set_cancel(false);
                }
                else
                {
                    eventArgs.set_cancel(true);
                }
            }
        </script>
        <telerik:RadGrid
                        ID="rgInbox"
                        Skin="Simple"
                        ShowFooter="true"
                        AllowMultiRowSelection="True"

                        ClientSettings-EnableRowHoverStyle="true"
                        AutoGenerateColumns="false"
                        ShowStatusBar="true"
                        AllowFilteringByColumn="true"
                        AllowSorting="true"
                        AllowPaging="true"
                        PageSize="10"
                        runat="server"
                        ShowGroupPanel="True"
                        >

<!-- SOME COLUMNS GO HERE -->
        </telerik:RadGrid>
    </telerik:RadAjaxPanel>

I forgot to mention, this only happens in FireFox, it works fine in IE.

[Dimo]

Hello Basel,

The provided code snippet does not exhibit the problem. As suggested earlier, please provide a full runnable web page. Thank you.

Regards,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Basel Nimer]

ok, is there a way to send you a link in private?

[Basel Nimer]

I think i found the problem, but not the solution,

I have a master page with the ContentPlaceHolder surrounded by a DIV with padding-left:20px, and inside the page that inherits the master page i have only a gridview and the ajax controls.

this padding is causing a shift left (actually, it is more like ignoring the padding).

i will post a sample next,

[Basel Nimer]

create a master page with the following code

<%@ Master Language="VB" CodeFile="M1.master.vb" Inherits="M1" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title>Untitled Page</title>

<style type="text/css">

.UserEditableWithAd

{

display:table;

padding-top :10px;

/*padding-right : 20px;*/

padding-bottom: 0px;

padding-left: 20px;  width:100px;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager id="RadScriptManager1" runat="server"></telerik:RadScriptManager>

<div class="UserEditableWithAd">

<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">

</asp:contentplaceholder>

</div>

</form>

</body>

</html>

Now create a page that inherits the master page with the following code

<%@ Page Language="VB" MasterPageFile="~/M1.master" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" title="Untitled Page" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
 <telerik:RadGrid
   id="RadGrid1"
   runat="server"
>
 <MasterTableView AutoGenerateColumns="True"
 AllowSorting="true" />
</telerik:RadGrid>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default" MinDisplayTime="5000">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
</asp:Content>

following code is to fill the datagrid with sample data

Imports Telerik.Web.UI
Partial Class _Default
    Inherits System.Web.UI.Page
    Private Sub RadGrid1_NeedDataSource(ByVal [source] As Object, _
             ByVal e As GridNeedDataSourceEventArgs) _
             Handles RadGrid1.NeedDataSource
        Dim list As New ArrayList
        list.Add("string1")
        list.Add("string2")
        list.Add("string3")
        RadGrid1.DataSource = list
    End Sub
End Class

run and see

[Dimo]

Hello Basel,

The problem is caused by the display:table style. Tables and elements with such a display cannot have padding.

Regards,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Basel Nimer]

so it only appears on FF since FF follows the standards more than IE?

can i ask for a reference to forward to my management?

[Dimo]

http://www.w3.org/TR/CSS2/box.html#propdef-padding

Regards,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Basel Nimer]

I thank you