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

  • Profile Image
    locomotivedisplaycases
    Asked 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

  • Profile Image
    mert
    Answered 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
    locomotivedisplaycases
    Answered 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
    locomotivedisplaycases
    Answered 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
    mert
    Answered 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.