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

Why does my gauge look like this?

1 Answer 148 Views

Gauge

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

Bryan asked on 23 May 2013, 12:59 PM

gauge.png

gauge2.png

gauge3.png

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">

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

<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>

1 Answer, 1 is accepted

answered on 28 May 2013, 10:27 AM

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.