Difference between field width and text entry width

  • Benflips
    Asked on July 12, 2016 at 6:45 AM

    Hi.

    I've asked this in the past but haven't really got the answer I've needed.

    I keep being referred to your simplistic guide for field positioning which is not what I need!

    Example to illustrate my question here - the three phone numbers under the 'How to we contact you' form collapse widget.

    In the builder, when I hover my mouse over the fields (say the first one - Mobile) - it highlights the large width of the field itself, but clearly the width of the white-space text entry element has been truncated.

    Can you tell me how to increase just the white-space portion (perhaps on an individual field, not across the entire form) and/or at the same time reduce the field width so that I can fit all three phone numbers on one line.

    There are various other places in my form where I need (want) to increase the 'white-space' text entry part (I don't know how to correctly refer to this part) only, not the whole field width itself...it's driving me nuts, and I almost want to send a big long list of all the edits I need and ask you to do them all for me...

    You clearly have the skills and coding knowledge and I'm just fumbling through...

  • Welvin Support Team Lead
    Replied on July 12, 2016 at 10:03 AM

    You have applied a theme in the form as far as I could see it. The theme has a few custom CSS codes that overrides the default styles in the form, that includes the textboxes. 

    The phone number fields inside the How Do We Contact You? collapse are actually fit into one line, but only in the preview. This happens because you've changed the width of the input boxes in the designer. The width is being applied to the entire form. Now, if you'd like to change the width of the individual textboxes, you can only do it by injecting a custom CSS codes. 

    For the phone number fields, you can inject the following custom CSS codes:

    input#input_8_full {

        width: 150px !important;

        margin-right: -30px !important;

    }

    input#input_7_full {

        width: 150px !important;

        margin-right: -30px !important;

    }

    input#input_71_full {

        width: 150px !important;

        margin-right: -30px !important;

    }

    You can always contact us if you will need some help in the other fields. Overriding the styles is the only way you can correct the fields. 

  • Benflips
    Replied on July 12, 2016 at 8:45 PM
    Thank you.
    I sent a reply earlier to another problem...and it was me super frustrated.
    If I were to send you a list of all the fields I want expanded or reduced
    or aligned, similar to what you've just provided here, could I send that to
    you?
    I keep trying and it takes me a LOT longer than it takes you guys - clearly
    I don't really know what I'm doing and I think I'm probably causing more
    problems by trying to do it myself!
    *Regards,*
    *Dr. Ben Phillips*
    Chiropractor
    B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
    ...
  • Kiran Support Team Lead
    Replied on July 12, 2016 at 11:48 PM

    I understand. We can definitely help you with your JotForms. You may send us the list of the fields of your form through this thread so that we can help you with it. However, we can do the customization of your JotForm when we have some free time only. This may take some time to providing you with the solution depending on the complexity of the issue.

    If you are looking for a complete customization, you may also hire a developer who can help you with from Upwork or Freelancer websites.

    Thank you!

  • Benflips
    Replied on July 13, 2016 at 2:46 AM
    Thank you. I appreciate your efforts. I have just sent through the list on
    another similar thread
    *Regards,*
    *Dr. Ben Phillips*
    Chiropractor
    B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
    ...