Increasing the width of the Phone field

  • Profile Image
    MaggieJedlicka
    Asked on July 30, 2016 at 02:31 PM
    Now, I have 1 little issue.  I need my PH# (Phone) fields to be longer to fit the entire ###-###-#### in the field.  Tried in Designer to expand, no luck.  I just need the PH# longer so that the entire mask is exposed.
  • Profile Image
    Jan
    Answered on July 30, 2016 at 02:36 PM

    You will need to insert this custom CSS code in order to increase the width of the Phone fields. Here's the CSS code:

    #input_26_full, #input_30_full, #input_31_full, #input_32_full {
    width: 150px !important;
    }

    Here's a guide on How-to-Inject-Custom-CSS-Codes. Hope that helps. Thank you.

  • Profile Image
    MaggieJedlicka
    Answered on July 30, 2016 at 06:33 PM

    Well, I tried that with no luck...  Attached screen print.. I put in the CSS with no change, so I expanded only the 1st line, and put the PH# on a separate line.  You can see there are 2 different widths of the PH# boxes.  Seems to be something with trying to fit 3 elements on a line and fitting.  The width of the form is 1000px.  I want the FIRST NAME, LAST NAME and PH# on the same line, with enough  width in the PH# field to see the full phone number ###-###-####.  Help!  Thanks! MJ

  • Profile Image
    Jim_R
    Answered on July 31, 2016 at 01:55 AM

    Hey again MJ :) I cloned your form and noticed you already have the CSS codes in place. Sadly, you missed the exclamation prefix on the important tag:

    #input_26_full, #input_30_full, #input_31_full, #input_32_full {

        width : 200px important;

    }

    (it should have been !important)

    To fix this, just remove the important tag altogether, it will and should work by just declaring the width:

    #input_26_full, #input_30_full, #input_31_full, #input_32_full {

        width: 200px;

    }

    And here's how it will look like after those changes:

    As a side note, I noticed your first row still shows the PH# field below the FULL NAME field. Just SHRINK it the way you did on the other 3, then make the changes to the CSS Codes you already have in place.

    Give it a go and let us know if you'll need more help.

  • Profile Image
    MaggieJedlicka
    Answered on July 31, 2016 at 10:09 AM

    AHHHH! My bad!  I'm so lame...but you, you are so wonderful!!!

    Thanks for having my CSS back..

    Your Jotform grasshopper,

    Maggie!

  • Profile Image
    Jim_R
    Answered on July 31, 2016 at 11:06 AM

    Nah, we've all been there :)

    It's always a pleasure to help, hope you enjoy the rest of the weekend!