Space between label and field

  • Profile Image
    Asked on December 22, 2013 at 01:59 PM

    A form has two fields where a user selects frequency and day of the week. I want these two fields to flow like a sentence so I want the labels to the left but as you can see the space between the labels and the field is too big. Changing width in preferences affects all fields so that doesn't work well for the form. How can I reduce this space in individual fields without affecting others?

    If you want to see the form in action and the fields in question choose "CRUISE NIGHT" where indicated.

  • Profile Image
    Answered on December 22, 2013 at 02:47 PM

    Kindly try my clone of your form:

    I have used the following CSS code to move the fields closer:

    position: absolute;
    right: 50px;
    width: 10px;
    z-index: -1;


    Kindly let us know if you need further support. Thank you.

  • Profile Image
    Answered on December 22, 2013 at 05:09 PM

    Yes thanks that did help, I changed the settings a little and it looks much better. However...

    It would be helpful if you explain the code a bit, RIGHT seems to move the label but what does WIDTH do? Are there other parameters that can also be used to manipulate the spacing and position?

    May I suggest for a future update that you allow the user to change these space settings within the form design. That is, in preferences the space can be changed for ALL fileds, why not make each individual one changeable within the property settings? It would give users a lot more control withou having to know how to code CSS.

  • Profile Image
    Answered on December 22, 2013 at 08:16 PM


    The WIDTH refer to the label's width where the lable is contained.

    Actually, in our colleague Cesar's test form, the CSS code for the widht:10px; was overriden by the class code form-label-left since it was set to !important. So as you can see, the width of the label is not really 10px but 125px

    You can set the preferred width of 10px for ALL labels by changing the code of the class name.

    Example if you change the form-label-left class to 10px, all the labels in the form will have 10px width.


    We understand your suggestion of a more simple means to customize some of the form's elements with the form builder without doing any coding using CSS.

    A similar feature request had already been submitted to our developers. This is among the list of improvements that had already been look on.


    Hope this help. Inform us if there is more we can help you with.