Input fields not on same line as descriptor

  • RFOneVision
    Asked on January 28, 2020 at 6:11 PM

    I'm sorry but I've forgotten! It's been a while since I created the attached form. As you can see, the input fields are not next to their descriptions, but below them.

    There are other similar fields below these ones.

    Please advise how I can fix the formatting.

    Thanks,

    David

    Jotform Thread 2136700 Screenshot
  • Kiran Support Team Lead
    Replied on January 29, 2020 at 1:26 AM

    The label of the fields are aligned to Right in the form field settings which seems to be causing the issue. 

    158027887929012020 110137 Screenshot 10

    Please try changing the alignment of the labels for the fields to Left so that they should be displaying normally.

    Thank you!

  • RFOneVision
    Replied on January 29, 2020 at 6:50 AM
    No – sorry – that’s not the issue.
    I want the label to be right-aligned, but the input field to be on the same line as the label.
    Thanks
    ...
  • Richie JotForm Support
    Replied on January 29, 2020 at 8:33 AM

    You may try this custom CSS to make the labels right aligned.

    .form-sub-label {
    direction:rtl;
    }

    .form-label.form-label-auto{
    direction:rtl;
    }

    Let us know how it goes.


  • RFOneVision
    Replied on January 29, 2020 at 11:50 PM
    Sorry – I must not be being clear. My labels are already right-justified quite nicely.
    I need what is currently looking like this:
    [cid:image003.png@01D5D77D.6D2E6AA0]
    To actually look like this:
    [cid:image004.png@01D5D77D.6D2E6AA0]
    Thanks,
    David
    ...
  • Richie JotForm Support
    Replied on January 30, 2020 at 3:21 AM

    Unfortunately, we cannot view the screenshot you have shared.

    Kindly share the screenshot again by following this guide:-How-to-add-screenshots-images-to-questions-to-the-support-forum

    Looking forward for your response.

  • RFOneVision
    Replied on January 30, 2020 at 3:24 AM

    Current:

    1580372620Jotform input fields org Screenshot 10

    Desired:

    1580372637Jotform input fields required Screenshot 21

    There are other input fields with the same problem further down the page.

    Thanks

    David

  • Richie JotForm Support
    Replied on January 30, 2020 at 4:50 AM

    Kindly set all your label alignment to left.

    Input fields not on same line as descriptor Image 1 Screenshot 20

    Then add this custom CSS in your form.

    #id_5,#id_6,#id_7{
    display: contents;
    }
    #id_8,#id_9{
    width: 150px !important;
    }

    Guide:https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Please give it a try and let us know how it goes.

  • RFOneVision
    Replied on January 30, 2020 at 5:41 AM

    Thanks - that fixed most of them. One to go as below. The 'Meals' label should be after the table, immediately in front of its unlabelled input field '$0.00', lined up with the succeeding fields 'Accommodation; Linen' etc. I have it has 'New line', but something is stopping it from moving down????

    Thanks,

    David

    1580380741Jotform meals field Screenshot 10

  • Richie JotForm Support
    Replied on January 30, 2020 at 7:04 AM

    You may use this CSS to align the meals.

    #label_36{

    margin-left: -115px;
    }
    #input_36{
    margin-top: 10px;
    }

    Screenshot:

    Input fields not on same line as descriptor Image 1 Screenshot 20

  • RFOneVision
    Replied on January 30, 2020 at 8:32 AM

    No that's not how it should look. This is how I need it:

    1580391130Meals Screenshot 10

    Thanks,

    D

  • Richie JotForm Support
    Replied on January 30, 2020 at 10:00 AM

    Kindly try this custom CSS

    #label_36{
    display: block;
    margin-top: 129px;
    margin-left: -320px;
    }
    #input_36{
    position: absolute;

    margin-top: 115px;

    margin-left: -168px;
    }

    If you need further assistance, let us know.