What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How Can I Move Drop Down Box Closer to Its Labels?

    Asked by locomotivedisplaycases on December 17, 2015 at 02:16 AM

    I am trying to align drop boxes on one part of my order form so they sit closer to the label. I cannot reduce the label field width in preferences as doing this throws other parts of my form out, so require some css. I am having to lay my form out this way as I need to use the calculation widget later on. hope you can help. David

     

    From this

    To this

    Page URL:
    http://locodisplaycasestwo.webeden.co.uk/order-form/4591313846

    move closer part part of form
  • Profile Image
    JotForm Support

    Answered by mert on December 17, 2015 at 02:53 AM

    Hi there,

    By injecting some custom CSS to your form, you can easily achieve this task. Below, you will find the necessary CSS code:

     

    .form-label.form-label-left {

        width : 100px;

    }

     

    After these steps, it will look like the below:

     

    I hope this one will work for you. Please, let us know the results after trying.

    Thanks.

  • Profile Image

    Answered by locomotivedisplaycases on December 17, 2015 at 04:16 AM

    Can't seem to get it to work, all that does is move the labels and therefore mis align some of the lables in the form previous - I already have css coding to align the left margin and labels. where as I require the text boxes moved over to the left if possible.

  • Profile Image

    Answered by locomotivedisplaycases on December 17, 2015 at 04:29 AM

    I have looked again at my form, whilst the dropdown boxes seem to have moved - but not as close as they appear in your screenshot, the wooden sleeper options are okay, Is there a way to move the concrete sleeper options over as illustrated below. Hope I have not confused you - thanks David

     

     

    I can adjust the px value so the boxes align with the next step button, its the coding I require to achieve the above - thanks

  • Profile Image
    JotForm Support

    Answered by mert on December 17, 2015 at 04:39 AM

    In this case, please try to inject following CSS code, it changes only those four drop downs' labels.

     

    #label_103, #label_108, #label_110, #label_111 {

        width:80px !important;

    }

     

    Also, you can move desired drop boxes to the right by using the CSS from the below:

     

    #id_108, #id_111 {

    float:right;

    }

     

    Thanks.