How do you adjust spacing on the small labels?

  • Profile Image
    sgambilldesign
    Asked on January 12, 2016 at 02:34 PM

    The small labels that are under the fields aren't close enough to the fields they belong to. It's difficult to tell when filling out the form if the small label relates to the one above or below it. 

    For example, in the section for name, 'middle name' goes with the field in the middle line, but looks like it goes with the field below it (which is really 'suffix'). 

    In another one of my forms, the spacing is perfect, so I don't know what I've done!

    (http://form.jotformpro.com/form/51544215113948)

     

    In a related note, why can't I adjust the size of 'prefix' and 'suffix' to be very short, and then have all fields on one line? Right now, they feel jumbled.

  • Profile Image
    Kevin_G
    Answered on January 12, 2016 at 04:48 PM

    Hi,

    Unfortunately, I'm unable to understand correctly your concern.

    You can inject this CSS code and adjust the width for all the fields in the name section : 

    [data-type="control_fullname"] .form-sub-label-container{

       width: 22%;

    }

    Do let us know if it helps, if not, please provide us more details about what are you trying to achieve, we will be glad to assist you.

    Regards.

  • Profile Image
    sgambilldesign
    Answered on January 12, 2016 at 05:01 PM

    I wasn't sure what to call the small labels, so knowing they are called 'sub labels' might help!

    Right now, the placement of the sub labels is confusing. "prefix" is closer to the 'middle name' field than the field for 'prefix'.  Can "prefix be moved up, so there is more space below it than above it? 

     

    I'm using 'prefix' as the example, but all sub labels need to be adjusted the same way. 

     

    In this other form (http://form.jotformpro.com/form/51544215113948), see how the sublabels are closer to the field they are labeling?  This is how they should look on the form I'm questioning... 

     


    I hope this is helpful..

     

  • Profile Image
    Kevin_G
    Answered on January 12, 2016 at 06:09 PM

    Hi,

    Thank you for the clarification.

    To reduce the space between the sub-label and the field, and at the same time separate it from the field below, just inject this CSS code : 

    .form-sub-label {

        margin-top: 0px;

        margin-bottom: 20px;

    } 

    Sub-labels will be displayed like this : 

    Hope this will help you.

    Regards.