Resize Kendo redial gauge with css

2 posts, 0 answers
  1. Blair
    Blair avatar
    13 posts
    Member since:
    Mar 2013

    Posted 03 Jun 2013 Link to this post

    Hi,
    I have checked the demo of kendo redial gauge and found all the demo code for kendo redial gauage size are fixed number,  without any percentage.  I have changed the css file to percentage, but the background image and gauge never be able to fit together. Will anybody provide some sample code? Many thanks. George

      #gauge-container {
                border-style:solid;
                border-color:red; 
                background:  transparent url(@Url.Content("~/Content/images/gauge-container-partial.png"))  ;
                background-vertical-position: -500% ;
                background-size: 100% 100%;
                width: auto;
                height: 100%;
                text-align: center;
                margin: -10% auto auto auto;
            }

            #SMDRReceiverMonitorChart {
                border-style:solid;
                border-color:blue; 
                width: auto;
                height: auto;
                align: center;
                margin: auto auto auto auto;
                
                border-color: transparent;
            }

            #gauge-container .k-slider {
               margin-top: -11px;
                width: 140px;
                
            } 
      
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 05 Jun 2013 Link to this post

    Hi George,

    I am afraid it is not possible to stretch Kendo UI Radial Gauge to fill 100% width and to fit with the image. Please keep in mind the background image in the online demo is set only for additional styling, it is not part from the Radial Gauge. 

    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
Back to Top