Why does my gauge look like this?

2 posts, 0 answers
  1. Bryan
    Bryan avatar
    11 posts
    Member since:
    Sep 2012

    Posted 23 May 2013 Link to this post

    See attached...

    This is what my gauge looks like in IE10 with compatibility mode off. It looks just fine when compatibility mode is on, but this has an adverse impact on other parts of my site.

    Gauges in the same web page work just fine - the basic details of my web page are:
    - The attached gauge is in the "header" part of my page, showing a target value. It is contained within a HTML table cell
    - The other gauges are within a RadTabStrip/RadPageView within a HTML table

    From what I can see, there should be no difference. Any ideas?

    My page code looks like this:

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Demo.aspx.vb" Inherits="WebApp.Demo" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
        <link href="../StyleSheet.css" rel="Stylesheet" type="text/css" />
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
            <center>
                <div class="pageBanner"><asp:Label runat="server" ID="lblHeading" CssClass="pageHeader" text="Demo" /></div>
                <asp:Label runat="server" ID="lblID" Visible="false" />
                <asp:Label runat="server" ID="lblValidation" Visible="false" CssClass="validation" />
                <table cellpadding="3" width="900px" border="0">
                    <tr valign="top">
                        <td style="width: 33%">
     
                        </td>
                        <td style="width: 33%">
                            <asp:Button ID="btnSave" runat="server" Text="Save" />   
                            <asp:Button ID="btnExit" runat="server" Text="Exit" />  
                            <asp:CheckBox runat="server" ID="chkAccepted" Text="Accepted" />
                        </td>
                        <td rowspan="2" style="width: 16%">
                            <asp:Label runat="server" ID="lblTgtDateLabel" text="Target Date" Font-Underline="true" Font-Bold="true" /><br />
                            <asp:Label runat="server" ID="lblTgtDate" text="" />
                        </td>
                        <td rowspan="2" style="width: 17%">
                            <asp:Label runat="server" ID="lblTgtRatingLabel" text="Target Rating" Font-Underline="true" Font-Bold="true" /><br />
                            <telerik:RadRadialGauge ID="gaugeTarget" runat="server" Height="80px" Width="80px">
                                <Pointer Color="0, 0, 0"   >
                                    <Cap Size=".1" />
                                </Pointer>
                            </telerik:RadRadialGauge>
                        </td>                   
                    </tr>
                    <tr align="left" valign="top">
                        <td colspan="2">
                            <asp:Label runat="server" ID="lblNameLabel" text="Name" Font-Bold="true" /><br />
                            <asp:Label runat="server" ID="lblName" text="" width="300px" CssClass="fakeTextBox" />
                        </td>
                    </tr>
                    <tr align="left" valign="top">
                        <td colspan="4">
                            <asp:Label runat="server" ID="lblInstructions" CssClass="pageInstructions" text="Instructions" />
                        </td>
                    </tr>
                    <tr align="left" valign="top">
                        <td>
                            <asp:Label runat="server" ID="lblSelectedPlaceLabel" text="Selected Place" Font-Underline="true" />
                        </td>
                        <td colspan="3" align="center">
                            <asp:Label runat="server" ID="lblotherPlacesLabel" text="Other applicable Places" Font-Underline="true" />
                        </td>
                    </tr>
                    <tr align="left" valign="top">
                        <td>
                            <asp:Label runat="server" ID="lblSelectedPlace" text="" />
                        </td>
                        <td colspan="3" align="center">
                            <asp:CheckBoxList runat="server" ID="chkPlaceList"></asp:CheckBoxList>
                        </td>
                    </tr>
                </table>
                <table cellpadding="3" width="900px" border="0">
                    <tr align="left" valign="top">
                        <td>
                            <telerik:RadTabStrip runat="server" ID="ts1" SelectedIndex="0" MultiPageID="mp1">
                                <Tabs>
                                    <telerik:RadTab Text="Page 1" Value="calc" PageViewID="pv1" />
                                    <telerik:RadTab Text="Page 2" Value="element" PageViewID="pv2" />
                                    <telerik:RadTab Text="Page 3" Value="control" PageViewID="pv3" />
                                </Tabs>
                            </telerik:RadTabStrip>
                            <telerik:RadMultiPage runat="server" ID="mp1" SelectedIndex="0">
                                <telerik:RadPageView runat="server" ID="pv1">
                                    <table width="95%">
                                        <tr>
                                            <td colspan="3"><asp:Label runat="server" ID="Label1" Text="Label1" Font-Bold="true" /></td>
                                            <td rowspan="3">
                                                <telerik:RadRadialGauge ID="gauge1" runat="server" Height="80px" Width="80px">
                                                    <Pointer Color="0, 0, 0"   >
                                                        <Cap Size=".1" />
                                                    </Pointer>
                                                </telerik:RadRadialGauge>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><asp:Label runat="server" ID="lblLabel2" Text="Label2"/></td>
                                            <td><asp:Label runat="server" ID="lblLabel3" Text="Label3"/></td>
                                            <td><asp:Label runat="server" ID="lblLabel4" Text="Label4"/></td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <telerik:RadSlider runat="server" ID="slider1" Orientation="Horizontal" Width="250" Height="40"
                                                    TrackPosition="TopLeft" ItemType="Item" EnableServerSideRendering="true" ShowDecreaseHandle="false" ShowIncreaseHandle="false" />
                                            </td>
                                            <td>
                                                <telerik:RadSlider runat="server" ID="slider2" Orientation="Horizontal" Width="250" Height="40"
                                                    TrackPosition="TopLeft" ItemType="Item" EnableServerSideRendering="true" ShowDecreaseHandle="false" ShowIncreaseHandle="false" />
                                            </td>
                                            <td><telerik:RadNumericTextBox runat="server" ID="Textbox1" width="80px" /></td>
                                        </tr>
                                        <tr>
                                            <td colspan="3"><asp:Label runat="server" ID="lblLabel5" Text="Label5" Font-Bold="true" /></td>
                                            <td rowspan="3">
                                                <telerik:RadRadialGauge ID="gauge2" runat="server" Height="80px" Width="80px">
                                                    <Pointer Color="0, 0, 0"   >
                                                        <Cap Size=".1" />
                                                    </Pointer>
                                                </telerik:RadRadialGauge>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><asp:Label runat="server" ID="lblLabel6" Text="Label6"/></td>
                                            <td><asp:Label runat="server" ID="lblLabel7" Text="Label7"/></td>
                                            <td><asp:Label runat="server" ID="lblLabel8" Text="Label8"/></td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <telerik:RadSlider runat="server" ID="slider3" Orientation="Horizontal" Width="250" Height="40"
                                                    TrackPosition="TopLeft" ItemType="Item" EnableServerSideRendering="true" ShowDecreaseHandle="false" ShowIncreaseHandle="false" />
                                            </td>
                                            <td>
                                                <telerik:RadSlider runat="server" ID="slider4" Orientation="Horizontal" Width="250" Height="40"
                                                    TrackPosition="TopLeft" ItemType="Item" EnableServerSideRendering="true" ShowDecreaseHandle="false" ShowIncreaseHandle="false" />
                                            </td>
                                            <td><telerik:RadNumericTextBox runat="server" ID="Textbox2" width="80px" /></td>
                                        </tr>
                                        <tr>
                                            <td colspan="4">
                                                <telerik:RadTextBox runat="server" ID="txtComment" MaxLength="1000" Width="550px" TextMode="MultiLine" Rows="5" Wrap="true" />
                                            </td>
                                        </tr>
                                    </table>
                                </telerik:RadPageView>
                                <telerik:RadPageView runat="server" ID="pv2">
     
                                </telerik:RadPageView>
                                <telerik:RadPageView runat="server" ID="pv3">
     
                                </telerik:RadPageView>
                            </telerik:RadMultiPage>
                        </td>
                    </tr>
                </table>
     
            </center>
        </form>
    </body>
    </html>

  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1493 posts

    Posted 28 May 2013 Link to this post

    Hi Bryan,

    RadGauge uses JavaScript to render the image through vector graphics formats - SVG for modern browsers and VML for older ones. The behavior you describe has been observed under older browsers like IE7, or IE in compatibility mode because the VML elements there inherit some CSS properties (e.g. text-align: center). The way around this is to add a text-align: left to the gauge to handle the CSS from your page, if need be, for example:

    <td align="center" rowspan="2" style="width: 17%">
        <asp:Label runat="server" ID="lblTgtRatingLabel" Text="Target Rating" Font-Underline="true"
            Font-Bold="true" /><br />
        <telerik:RadRadialGauge ID="gaugeTarget" runat="server" Height="80px" Width="80px"
            Style="text-align: left">
            <Pointer Color="0, 0, 0">
                <Cap Size=".1" />
            </Pointer>
        </telerik:RadRadialGauge>
    </td>



    Regards,
    Danail Vasilev
    Telerik
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top