How to adjust the height of input fields of Driving Distance Calculator?

Hi

How can I make the input fields of the distance calculator widget higher?

There is a "width" adjustment on the formatter but no height adjustment!

The input fields "From and Too" are not high enough.

I would also like to add a custom "pin" before the input text, red in the "from" field and green in the "too" field or vice versa!

Thanks.

Hello,

The height of input fields could be adjusted via Custom CSS option. But, this feature is only available for Classic layout of forms.

It seems that the form you provided has Cards layout at the moment. If you would like to switch it to Classic, please let us know and we will gladly check for possible code for your form: How-to-Change-the-Form-Layout

Hi Victoria

Thanks for the reply I have now changed the form to classic. Can you please check the CSS code for me as it doesn’t work.

As ling as I can see the size in the CSS I can then adjust it.

Many Thanks

Hi

Thanks for the reply I have now changed the form to classic. Can you please check the CSS code for me as it doesn’t work.

Thanks

...

Please add the custom CSS code below to increase the height and font size of the Distance Calculator:

input#ddFrom {

    height: 20px;

}

input#ddTo {

    height: 20px;

}

input[type=text] {

    font-size: 15px;

}

To add custom CSS code to widget, please follow this guide: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets

Here's the result: