How to find and reduce the padding of a field?

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

    Hi. 

    Reference for this question: Page 3. the 'Which is?' field for preferred name, or the 'Spouse/Partner's Name?'

    How do I choose a specific field - then reduce all of the padding so that it aligns horizontally with the field above it...

    In this case so the 'which is?' lines up under 'Last' and the 'spouse/partner's name?' lines up under birth date?

  • Kevin Support Team Lead
    Replied on July 12, 2016 at 9:49 AM

    I made an image to explain you how this can be done, basically you need to use the developers tool in order to get the code you will add, for example, you will need to click on the field and then click on inspect option, there you can add the code and add the padding then just copy and inject it in your form:

    How to find and reduce the padding of a field?  Image 1 Screenshot 20

    As shown in my screenshot, this is the code that you will use:

    li#id_57 {

        padding-right: 0px;

    }

    Please do note that you will need to change the value ( 0px ) in order to properly set the needed padding for your field, so you can either reduce or increase it as you need. 

    This guide will help you to inject the code to your form: How-to-Inject-Custom-CSS-Codes

    Hope this helps. 

  • Benflips
    Replied on July 12, 2016 at 8:45 PM
    This is so FRIGGING difficult for someone who doesn't know code.
    Can I provide a list of these things that I need done and get you guys to
    do it for me?
    I feel like every attempt I make takes me 10min and doesn't necessarily
    give me the outcome I want and I have to come back to you yet again for
    further advice.
    I just tried to change the padding on the 'spouse/partner's name' field
    below and it partly worked, but because of the relative width of the sex
    field (i assume, the birth date field is just slightly out of alignment.
    Changing the characteristics of a group of controls clearly is not the
    answer. It seems this needs to be done field by field and it is painful!
    *Regards,*
    *Dr. Ben Phillips*
    Chiropractor
    B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
    ...
  • Kevin Support Team Lead
    Replied on July 12, 2016 at 10:57 PM

    Yes, you need to apply the code to each field, depending on the changes that you want to make, this is because not all the fields will be affected the same with the code, so you need to customize each field. 

    You can provide us the details about the changes that you want to get applied to your form, would be good to let us know each details so we can apply them on a cloned form and provide you with that so you can clone it or simply copy the code and paste it in your form. 

    If possible, please provide us some screenshots about how do you like fields to look, we will be glad to assist you with that.

  • Benflips
    Replied on July 12, 2016 at 11:45 PM
    Thanks Kevin.
    I'm just heading off to lunch and then I will compile a list and provide
    examples.
    Thank you
    *Regards,*
    *Dr. Ben Phillips*
    Chiropractor
    B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
    ...
  • Benflips
    Replied on July 13, 2016 at 2:46 AM

    So...here is quite a long list of small 'tweaks' that I need to be done,
    and I'm hoping you can do for me...
    Page 1 -
    Can you tell me how the

    video being set to 'must be watched'


    1. I put in some suggested code at one point to disable the (unused)
    labels above checkboxes 2-5 under the privacy consent tab...so they 'look'
    like they are all one set of checkboxes.
    It appears that some other change we have applied since then has now
    added extra space between each again, including space between the first
    checkbox and it's label. I'd like this all reduced or compressed please.
    2. For all check-boxes and radio buttons with TOP label alignment, can I
    have the button or checkbox icon left-aligned directly under (or perhaps
    only slightly indented) from the overlying label - currently it looks like
    it is almost a centimetre in and it is too much.

    3. Please, in making this change, keep the earlier code that keeps the
    wrapped text from the options aligned like they are at the moment, rather
    than wrapping under the checkbox itself.
    4. Perhaps provide a slightly increased gap between the icon and where
    the option text begins - maybe another 3-5 pixels.
    5. Can I have the name and date fields more 'centred' at the bottom of
    the page (if not easy, please disregard)
    6. I noticed that for these last elements on a given page, the hint text
    'bubble' is 'cut off' at the bottom - can you find a fix for this please?
    Page 2

    ...

  • Irshad
    Replied on July 13, 2016 at 6:37 AM

    I have created the separate threads for your queries, and you will be answered there very soon.

    Below are the URLs of those new threads:

    https://www.jotform.com/answers/881455 

    https://www.jotform.com/answers/881457

    https://www.jotform.com/answers/881459