Text Resizer widget: Change button color and button size.

  • Profile Image
    bobbyrenaud
    Asked on March 28, 2017 at 05:17 PM
  • Profile Image
    Mike_G
    Answered on March 28, 2017 at 10:05 PM

    Yes, that is correct. Since there is no option in the widget's properties to set the button color and the size of the button, we can only do it with the help of CSS codes.

    In the Form Designer, under CSS tab's Inject Custom CSS, please add the following CSS codes.

    /*set button color and button size*/

    #decfont, #incfont {

        background: green !important;

        width: 60px !important;

        height: 60px !important;

    }

    /*distance between decrement and increment buttons*/

    #incfont {

        left: 68px !important;

    }

    I hope this helps. Please feel free to let us know if you need any further assistance and we will be glad to help you.

    Thank you.

  • Profile Image
    bobbyrenaud
    Answered on March 29, 2017 at 03:50 PM

     

    Thanks...Did 30 x 20...Font?...A- unchanged

    ??

     

  • Profile Image
    jonathan
    Answered on March 29, 2017 at 05:30 PM

    Please try this CSS codes instead.

    #decfont, #incfont {

        padding: 26px 0px !important;

        margin-left: 4px !important;

        width: 60px !important;

        height: 60px !important;

      background: green !important;

    }

    #decfont {

        left: -12px !important;

    }

    Example output:

     

    You can adjust the numbers in px as needed.

     

     

  • Profile Image
    bobbyrenaud
    Answered on March 30, 2017 at 11:23 AM

    This is what it looks like now

    with...

     

    #decfont, #incfont {

        padding: 26px 0px !important;

        margin-left: 4px !important;

        width: 30px !important;

        height: 20px !important;

      background: green !important;

    }

    #decfont {

        left: -12px !important;

    }

    ##############################

    ##############################

     

     

  • Profile Image
    bobbyrenaud
    Answered on March 30, 2017 at 12:47 PM

    I still need smaller ..

       now  w=30 h=20 ??? 

     

    https://form.jotform.us/70435198618160

  • Profile Image
    Welvin
    Answered on March 30, 2017 at 02:23 PM

    I've modified the CSS, just play around with the padding until you get your desired output.

    #decfont, #incfont {

        padding: 10px 30px 10px 15px !important;

        background: green !important;

        font-size: 13px !important;

    }

  • Profile Image
    bobbyrenaud
    Answered on March 30, 2017 at 03:48 PM

    Now got this... But... How to resize the bottons

    also cant'align CENTER ?

    #decfont, #incfont {

        padding: 5px 15px  5px 8px !important;

        background: #aaaacc !important;

        font-size: 13px !important;

    }

  • Profile Image
    BDAVID
    Answered on March 30, 2017 at 05:21 PM

    You can resize the buttons with the following code:

    #incfont {

        margin-left: 50px !important;

    }

    #decfont, #incfont {

        width: 80px !important;

        height: 80px !important;

    }

    #id_11 {

        left: 36% !important;

        width: 200px !important;

    }

    Result:

    Let us know if you need more help.

  • Profile Image
    bobbyrenaud
    Answered on April 03, 2017 at 11:06 AM

    Thanyou all............Bob