how I can reduce the font size and place text in the centre of the button

  • Profile Image
    kranai
    Asked on February 17, 2016 at 12:50 PM
    1. I have cerated a new form called Insight Academy Customer Loop. I just want to collect email and names from users. I did all the changes when I view my form in Designer mode. Only problem is the label on the 2 buttons at the bottom. Can u please let me know how I can reduce the font size and place it in the centre of the button.
  • Profile Image
    Kiran
    Answered on February 17, 2016 at 01:13 PM

    It seems that the height of the button has been reduced which is causing the issue. Please inject the following CSS code to your JotForm so that the text shall be properly aligned to middle and to change the font size of the text.

    #input_2, #input_reset_2 {

    padding-top: 0px !important;

    font-size: 11px;

    }

    You may change the font size as per your requirement. Hope this information helps! 

  • Profile Image
    kranai
    Answered on February 17, 2016 at 08:59 PM

    Hi Kiran

    Thanks a lot for the code. It works as I wanted. It beats me when I read the code and I asked myself how those 3 lines are related to the button when there is no mention of the button object in the code. Mind boggling....! end result is it works but understanding confused.

    rgds

    kish

  • Profile Image
    Kiran
    Answered on February 17, 2016 at 11:26 PM

    As I checked your JotForm, I noticed that the height of the button was decreased to match the text-box height. Since the top padding of the button text was set to more on the button style/theme chosen, the text is pushed down. So resetting the top padding of the text to zero has made the center to align to the middle of the button.

    Hope this information helps!