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

Ajax PostBack background color

1 Answer 58 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Osmon
Top achievements
Rank 1
Osmon asked on 04 Oct 2010, 03:40 PM
Hi,
      I have some background issue. It may also be  connected to how i am building my master page using ajaxpanel and ajaxmanager, etc. here is a what i have in the master page.

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" 
        DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadMenu1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="masterContent" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="crumbs">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadMenu1" />
                    <telerik:AjaxUpdatedControl ControlID="masterContent" />
                </UpdatedControls>
            </telerik:AjaxSetting>
              
        </AjaxSettings>
          
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">
    </telerik:RadAjaxLoadingPanel>
    <div>
<table width="100%"  border="5">
  <tr>
    <td class="noprint" id="masterHeader1" colspan="2">
        <img alt="All Languages Logo" src="Images/logo.gif" style="border: 1px; border-color:Silver; vertical-align:top;" />
        <span style="font-family:Arial; font-size:18px;font-weight:bolder;">Customer Web Portal</span><br />
        <span style="font-size:9px"><asp:LoginName ID="ln" FormatString="Logged in as: {0}" runat="server"/></span>
    </td>
  </tr>
  <tr>
    <td valign="top" width="175px">                
            <telerik:RadMenu ID="RadMenu1" Runat="server" style="z-index:2900"
                DataSourceID="SiteMapDataSource1" EnableRoundedCorners="True" Width="175px"
                EnableShadows="True" Flow="Vertical">
            </telerik:RadMenu>
    </td>
    <td valign="top" width="95%">        
             
          
        <telerik:RadAjaxPanel ID="pnlContent" runat="server" HorizontalAlign="Left" LoadingPanelID="RadAjaxLoadingPanel1">
              
              
  
            <table>
        <tr>
            <td id="breadcrumbs" class="noprint">
                  
                <asp:SiteMapPath ID="crumbs" runat="server" CurrentNodeStyle-CssClass="hide" PathSeparator=" : "  >
                    <CurrentNodeStyle CssClass="hide" />
                </asp:SiteMapPath>
            </td>
        </tr>
        <tr>
            <td>
                <asp:SiteMapPath ID="title" ParentLevelsDisplayed="0" CurrentNodeStyle-Font-Size="Large" runat="server"  >
                    <CurrentNodeStyle Font-Size="Large" />
                </asp:SiteMapPath>
            </td>
        </tr>      
        <tr>
            <td  id="pageContent">
                <asp:contentplaceholder id="Main" runat="server"></asp:contentplaceholder>
            </td>
        </tr>
       </table>
         
        </telerik:RadAjaxPanel>

       I am just using the ajaxpanel so i do not have to configure the manager self referenced calls as most of the stuff would be going on inside  the main panel. Otherwise i should have actually just use one ajaxpanel for the whole page. 

ISSUE:
             Attached are some screen shots. I have probably 2 issues:

1-On first load, the visible area of the page (without scrol bar) has the white color but the overflowed area is greyish, why ? and how can i fix it ?

2-On post back, all the empty area of the page (white before) but inside the panel (probably) changes the color to grey. why does it change. I want consistent look, either white or grey but it should stay all the time.

Please help. Thanks,

Regards,

Osman

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 05 Oct 2010, 12:24 PM
Hello Osmon,

The provided code snippet is not enough to determine the exact cause of the problem.

The 100% wide <table>s actually expand beyond 100% if they cannot enclose their content. However, <div>s do not do that, so you may end up with a <div>, which is as wide as the browser window and a <table> inside it, which is wider and overflows. Such a scenario may cause some backgrounds to look out of place.

Changes in styling after an AJAX request may be caused by changing the order of registered <link> elements (CSS files) and <style> elements (CSS styles in the page <head>). To overcome such an issue, you should use CSS styles only in external files or change the specificity of the selectors in the <style> element.

If you need further assistance, please provide a full standalone runnable web page for us to inspect locally.

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
Tags
Ajax
Asked by
Osmon
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or