Knob Canvas: How to add °C after the value?

  • Profile Image
    Kevin_G
    Answered on February 04, 2017 at 10:53 PM

    May you provide us the widget you're referring to? 

    We will wait for your response. 

  • Profile Image
    Wtfuck
    Answered on February 05, 2017 at 06:29 AM

    Hi

    Here is the link

    https://widgets.jotform.com/widget/knob_canvas

  • Profile Image
    Kevin_G
    Answered on February 05, 2017 at 11:52 AM

    You can do it with some CSS code, here is the one that I used on my end: 

    This one should be injected to the form: 

    #cid_8::before{

     content: "°C" ;

        position: absolute;

        margin-top: 76px;

        margin-left: 110px;

        font-style: normal;

        font-variant: normal;

        font-weight: bold;

        font-stretch: normal;

        font-size: 47px;

        line-height: normal;

        font-family: Arial;

        text-align: center;

        color: white;

        padding: 0px;

        -webkit-appearance: none;

    }

    The ID where the code should be injected will change, this guide will help you to find fields IDs: https://www.jotform.com/help/146-How-to-find-field-IDs-and-names 

    Just replace the number on my sample code with the number in the ID you will find, it may change so it could also be "cid_9" or "cid_10", following the guide above will help you to find it. 

    This guide will help you to inject the code to your form: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    The next code needs to be injected to the widget:

    #dial{

        margin-left: -170px !important;

    }

    To add it click on the wizard icon, go to the CSS tab and paste the given code  there: 

    This should be the result: 

    Here's also the link to my sample form: https://form.jotform.com/70354475015957 

    Feel free to clone it

  • Profile Image
    Wtfuck
    Answered on February 05, 2017 at 03:05 PM

    Awesome you rocks Kevin !