Completed
Last Updated: 22 Jun 2022 09:30 by ADMIN
ADMIN
Danail Vasilev
Created on: 27 Aug 2015 12:40
Category: Gauge
Type: Bug Report
1
RadLinearGauge is not properly resized

Workaround: 1) Use RenderAs="SVG". 2) Set 100% width to the gauge's wrapper prior the resizing

 

Use the solution below to make the control responsive:

     <table style="width: 100%;">
            <tr>
                <td>
                    <div style="width: 100%;" id="gauge"></div>
                    <telerik:RadLinearGauge runat="server" ID="RadLinearGauge1" RenderAs="SVG" Width="100%">
                        <Pointer Color="Gray" Size="10" />
                        <Scale Vertical="false" Min="0" Max="40">
                            <MinorTicks Size="20" />
                            <Ranges>
                                <telerik:GaugeRange Color="#D7E5D1" From="0" To="10" />
                                <telerik:GaugeRange Color="#EBE6D2" From="10" To="20" />
                                <telerik:GaugeRange Color="#F5D2D1" From="20" To="30" />
                            </Ranges>
                        </Scale>
                    </telerik:RadLinearGauge>
                </td>
            </tr>
        </table>
            <script type="text/javascript">
                var $ = $telerik.$;
                $(window).resize(function () {
                    $("#<%= RadLinearGauge1.ClientID %> > div")[0].style.width = "100%";
                    $find('<%= RadLinearGauge1.ClientID %>').get_kendoWidget().resize();

                });
            </script>

0 comments