How to align a label (Question Text) to the right of a dropdown box?

  • HACA
    Asked on December 14, 2016 at 6:19 PM

    I would like to align my labels to the right of a dropdown box.  Label alignment only moves the text to the top. When selecting Left or Right, the text stays to the left.

     

    How to align a label (Question Text) to the right of a dropdown box? Image 1 Screenshot 20

    Here is the form link > https://form.jotform.com/63474570844968

     

     

    Thanks,

     

     

  • AIDAN
    Replied on December 14, 2016 at 6:39 PM

    Please add the following custom CSS code:

     

    #label_123 {
        margin-left: 50px;
        margin-bottom: -25px;
    }

     

    I noticed that you are already using custom CSS code in your form, but just for completion here is a tutorial on how to add it: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Please let us know if you need further assistance.

  • HACA
    Replied on December 15, 2016 at 10:22 AM

    Great. I was close adjusting the left margin, but did not consider the bottom margin.

    How would I adjust if I do not use the "Qty." sub-label.

    Thanks,

     

  • AIDAN
    Replied on December 15, 2016 at 11:25 AM

    I apologize for not understanding what exactly did you mean by "How would I adjust if I do not use the "Qty." sub-label.".

    Could you please be so kind as to rephrase it or explain it further? Ideally with a screenshot like before?

     

    Thank you in advance. I'm looking forward to addressing this request too.

  • HACA
    Replied on December 15, 2016 at 8:46 PM

    If I remove the sub label "Qty", the dropdown box widens and the label goes behind the dropdown field.  I think it requires adjusting the bottom margin, but I could not get it to adjust correctly.

  • Welvin Support Team Lead
    Replied on December 16, 2016 at 12:59 AM

    I've fixed it for you by replacing the custom CSS codes with the following:

    label#label_123,

    label#label_124,

    label#label_125,

    label#label_126,

    label#label_127,

    label#label_129 {

        display: inline-block;

        float: right;

        text-align: right;

        width: 100% !important;

        margin-left: 5px;

    }

    select#input_123,

    select#input_124,

    select#input_125,

    select#input_126,

    select#input_127,

    select#input_129 {

        width: 90px !important;

    }

    With or without the Sub Label, they should align property. Here's my cloned version of  your form with the above custom CSS codes: https://www.jotformpro.com/form/63500582529961