Light gray background is smaller than the textboxes - how can I fix this?

  • Russ563
    Asked on March 6, 2015 at 10:36 PM

    I was recently playing around with 'Designer' & 'Themes', and at some point I got to where couldn't go back. So I changed it to the closest thing I could find to what I had/liked. Now there are at least 3 things that don't look right:

    1. The light gray is not all the way behind the input field.

    2. The dark gray & light gray don't lineup on t he right side.

    3. The input field for phone numbers is smaller than the 10 digits in a number.

    Thank you for any help.

    Jotform Thread 528649 Screenshot
  • Sean
    Replied on March 7, 2015 at 8:55 AM

    I did a test with the CSS code below and it happens to work just fine.

    .form-input-wide{
    width: auto !important;
    }

    #cid_4, #cid_25, #cid_53, #cid_56,
    #cid_27, #cid_26, #cid_76, #cid_89,
    #cid_110{
    height: 35px !important;

    }

    Please follow this guide to inject the CSS code:
    http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes/

    I have separated each issue so that they can be addressed separately. You can follow the updates made on each thread here:
    http://www.jotform.com/answers/528716 
    http://www.jotform.com/answers/528717 


    Thank you


  • Russ563
    Replied on March 7, 2015 at 10:56 AM

    Thank You, fixed on all except 'Birth Date'.  (hidden till you choose a category)

  • Sean
    Replied on March 7, 2015 at 12:09 PM

    Sorry about missing that one. Ensure that you replace the code provided above with the one provided below.

    #cid_4, #cid_25, #cid_53, #cid_56,
    #cid_27, #cid_26, #cid_76, #cid_89,
    #cid_110, #cid_24{
    height: 35px !important;
    }

    Do let us know the outcome.

  • Sean
    Replied on March 7, 2015 at 12:15 PM

    I did some more checks and it appears that there were multiple fields hidden. Please use this code instead.

    #cid_4, #cid_25, #cid_53, #cid_56,

    #cid_27, #cid_26, #cid_76, #cid_89,
    #cid_110, #cid_24, #cid_106, #cid_107, #cid_108{
    height: 35px !important;
    }

  • Russ563
    Replied on March 7, 2015 at 12:37 PM

    Thank you.

    There are still about 5 more fields that need to be fixed, although I figured out the pattern and can fix them myself.

    But just like my other question, I don't understand why it isn't automatic. Why do I need to change each field individually?  Is it by any chance caused by some of the other CSS code in my form? I understand some of it but not all.

     

    Edit:

    I fixed all but PayPal....

  • Sean
    Replied on March 7, 2015 at 2:12 PM

    Yes it is possible that other CSS codes can be at fault. I tired multiple scenarios of the class for those fields but they don't seem to respond to my propose CSS adjustments. Sadly, I ended up targeting each affected field to have them adjusted.

    What is the issue that you are having with the PayPal field?

  • Russ563
    Replied on March 7, 2015 at 3:05 PM

    Same as original question.

  • Russ563
    Replied on March 9, 2015 at 10:19 PM

    Yes, Thank you. All I needed was the 113. I couldn't find that number on my end.

  • Ashwin JotForm Support
    Replied on March 10, 2015 at 2:52 AM

    Hello Russ563,

    On behalf of my colleague, you are welcome.

    Do get back to us if you have any questions.

    Thank you!

  • Russ563
    Replied on September 12, 2015 at 7:05 PM

    I can't seem to find these numbers on any of my forms?!?

    I have a new form:

    http://form.jotformpro.com/form/52546489055969

    That needs the 'Early Bird' field fixed.

  • Elton Support Team Lead
    Replied on September 13, 2015 at 1:08 PM

    Append this CSS codes. This should fixed everything as well as the new fields you will add.

    .form-input-wide {

        display: inline-block;

    }