How do I change the size of a form entry?

  • Profile Image
    mlwhall
    Asked on November 03, 2011 at 12:44 PM

    I need to have the size for entry fields to be bigger (at least taller). I am going to display on an Ipad and I need the entry fields to be a little bigger in order for them to make it easier to enter data into the forms.

     

  • Profile Image
    abajan
    Answered on November 03, 2011 at 12:59 PM

    Inject the following CSS into your form and save it:

    .form-textbox {
    height:2em;
    }

    If you wish, the "2" can be changed to another number ("2.1", "2.2", "2.3"... "2.9", "3", "3.1", "3.2" and so on.)

  • Profile Image
    abajan
    Answered on November 03, 2011 at 01:14 PM

    Actually, you'd better make that

    input, select, button {
    height:2em;
    }

    However, resizing the checkboxes is proving to be inconsistent across browsers. I'll need to research this and get back to you, unless one of my colleagues can come up with a solution.

    UPDATE: It appears that attempting to resize the check boxes may be an exercise in futility. So, the best alternative may be to simply increase the space between their parent elements by injecting a second rule, similar to the following:

    .form-checkbox-item {
    margin-top:1.2em;
    margin-bottom:1.3em;
    }

    Incidentally, increasing the space between each country in the dropdown selector is also inconsistent across browsers.