Increasing field height

  • Profile Image
    kevgais
    Asked on June 29, 2011 at 05:40 PM

    Hi guys, great product. I'm designing a form that is going to be used on a tablet device. The problem is the fields are a bit small on the screen making them hard to 'touch'. Is there anyway to increase a field's size? I know I can increase it's width but I want to increase it's height to make it easier to touch. Maybe some sort of custom CSS?

    Many thanks.

    Kev

  • Profile Image
    abajan
    Answered on June 30, 2011 at 04:46 AM

    Hi Kev

    Thanks for asking. I know the question is about increasing the height of of the fields but would increasing the distance between them help? If so, there's a simple way to do that using the form builder:

    1. Load the form in question into the form builder

    2. While on the Setup & Embed tab, click Preferences > Field Styles

    3. Click the number to the right of Question Spacing and enter a higher number

    4. Click Close Settings and save the form

    That takes care of the spacing between the fields.

    Conversely, increasing the height of each field can only be done via injected custom CSS (quite a bit of it, if we're to go by this article) which would vary according to the form. Using your ...departments/services/alumni/contactus/form_placement_offer/ form as an example, if you were to use Firebug (Firebug Lite in Chrome) to determine the selectors that would need to be targetted, you would see that they're quite a lot. So, if increasing the space between each field gives an acceptable result, go with just that.

    If you require additional assistance with this or any other aspect of your forms, by all means ask. Our team will be glad to help where we can.


    ~ Wayne

  • Profile Image
    kevgais
    Answered on June 30, 2011 at 05:54 AM

    Cheers Wayne.

    bloody brillaint.

    was a doddle in the end.

    .form-textbox{ width: 254px; height: 50px; }

    .form-dropdown{ width: 254px; height: 50px; }

    .form-label-left{ width: 254px; height: 50px; }

     

    perfect :)

    Kev

  • Profile Image
    abajan
    Answered on June 30, 2011 at 08:55 AM

    Oh, cool! (or as some say nowadays kewl :)

    Glad everything worked out.


    ~ Wayne