Page layout different once app published

5 posts, 0 answers
  1. Cliff Gibson
    Cliff Gibson avatar
    45 posts
    Member since:
    Oct 2009

    Posted 30 Oct 2012 Link to this post

    Hi

    I've got a couple of HTML Charts on my page using the code below which is then databoud on page load.  If I view the application in debug mode from within Visual Studio (Windows 7, IE8) the page looks great.  However if I publish to the application server (IIS, Windows Server 2008r2) the page layout changes dramatically.  Please see the two images to demonstrate, can you advise what is causing this problem???

    Cheers
    Cliff

    <div id="divPriceChangesChart" style="position:absolute; top:180px; left:0px; ">
        <telerik:RadHtmlChart ID="chartPriceChanges" runat="server" Width="250px" Height="300px" Skin="Metro">
            <ChartTitle Text="Price Changes" >
                <Appearance Align="Left" />
            </ChartTitle>
            <Legend>
                <Appearance Position="Bottom" />
            </Legend>
            <PlotArea>
                <Series>
                    <telerik:PieSeries DataFieldY="NumberProducts" NameField="Period"></telerik:PieSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>
    </div>
      
      
    <div id="divAccessChart" style="position:absolute; top:180px; left:270px; ">
        <telerik:RadHtmlChart ID="chartAccess" runat="server" Width="250px" Height="300px" Skin="Metro">
            <ChartTitle Text="EPD User Access" >
                <Appearance Align="Left" />
            </ChartTitle>
            <Legend>
                <Appearance Position="Bottom" />
            </Legend>
            <PlotArea>
                <Series>
                    <telerik:PieSeries DataFieldY="NumberUsers" NameField="Period"></telerik:PieSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>
    </div>
  2.
  3. Cliff Gibson
    Cliff Gibson avatar
    45 posts
    Member since:
    Oct 2009

    Posted 31 Oct 2012 Link to this post

    Just to add to this, I've now put height and width attributes on the containing DIVs and now the chart displays but the legend  and all of the labels do not.

    Attached image shows Firefox 14 on the left and IE8 on the right.

    The demos on the Telerik site all render without any problems, this would lead me to believe this is not a browser specific issue but possibly how it is being hosted from the server???
  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3899 posts

    Posted 31 Oct 2012 Link to this post

    Hi Cliff,

    Can you confirm that all necessary resources are returned properly when you deploy your site? For example, missing CSS files can break the page layout; a proxy, firewall or other configuration on the server can break webresources so it is possible that not all scripts are loaded.

    Generally, this seems like an issue with the server configuration. What is also possible is that there are some text-align or float properties inherited by the charts from parent elements in your layout. You can try resetting them in the charts or in their wrappers to see if this is causing the problem in IE8, as there are similar issues under IE7 where CSS properties are applied to the VML image of the chart.


    Kind regards,
    Marin Bratanov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  7. Cliff Gibson
    Cliff Gibson avatar
    45 posts
    Member since:
    Oct 2009

    Posted 31 Oct 2012 Link to this post

    Hi Martin

    It would appear it is inheriting some properties from other styles it is within.

    Is there a way of overriding these, or ignoring other styles in the DIV's parent wrapper?

    Alternatively could you advise if a user control inherits styles from it's container, if not I could put the charts in a user control?

    Cheers
    Cliff
  8.
  9. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3899 posts

    Posted 01 Nov 2012 Link to this post

    Hello Cliff,

    I am not certain what are the styles that are inherited, but you can find them by a method of exclusion. Once the problematic rules are found you can add them with their default values (e.g. text-align: left;) to a div that will wrap the chart.

    On user controls - they are rendered as HTML in the place they appear in the markup. The resulting HTML is not different whether a user control is used, or the markup is placed inline. So, yes, user controls will inherit CSS rules from the page they are placed on.


    Regards,
    Marin Bratanov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top