Unable to align Label and text box correctly

  • glandoreghyc
    Asked on June 22, 2016 at 4:34 AM

    Hello,

     

    I have two forms on separate pages that are set up exactly the same, they are on

    http://glandoreyc.com/forms/llunch

    and

    http://glandoreyc.com/forms/summerparty

     

    Please not the text box at the bottom of the form, what ever i do i cannot seem to get the Label field to align Left of the text box.

    I do get the correct alignment when view on tablets in certain configurations, however on a Desktop it always comes out with the Label field on top of the Text box,

    Both forms are doing the same thing.

    Any help would be appreciated.

    Thanks

     

    John

  • Boris
    Replied on June 22, 2016 at 8:13 AM

    I have checked both forms, but I do not see any Text Box fields on either of them. This is how they are displaying:

    Unable to align Label and text box correctly Image 1 Screenshot 40

    Did you by any chance mean the part that says "Total", that I've marked in the above image with a red arrow?

    If that is what you wanted to move, that is not a label per say, it is actually a price tag from inside the "Buy Ticket" payment field. Because it is inside the inner part of the "Buy Ticket" field, that is where it is being displayed.

    If you want to force the price tag to be left aligned at the same place where the "Buy Ticket" label is, there are two ways to achieve it, both involving adding some custom CSS to your form.

    1. First method would be to add the following custom CSS to your form:

    li[data-type="control_paypal"] > div { width: 100%; }

    This would cause the entire inner part of the payment field to take the full available width, and would make the form appear like this:

    Unable to align Label and text box correctly Image 2 Screenshot 51

    2. The second method would be to move only the payment total ("Total" part) relatively from the rest of its container ("Buy Ticket" field). For the Summer Party form, the CSS for this workaround would be:

    @media only screen and (min-width: 641px) {
        .form-payment-total {
          position: relative;
          margin-left: -153px;
        }
    }

    Your form would display like this:

    Unable to align Label and text box correctly Image 3 Screenshot 62

    For both methods, you can inject CSS into your form by following this guide:

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

    Please let us know if this is what you were looking for, and if it was about something else, please provide a little more information about which exact label you are looking to move, and we will be happy to help.

  • glandoreghyc
    Replied on June 22, 2016 at 8:16 AM

    Hello,

     

    No it is the text box beneath the field you are referring to.

     

    John

  • Charlie
    Replied on June 22, 2016 at 10:56 AM

    I presume you are referring to the textarea field with the long label just before the submit button?

    Unable to align Label and text box correctly Image 1 Screenshot 40

     

    Unable to align Label and text box correctly Image 2 Screenshot 51

    I've viewing both the website link on a desktop computer.

     

    If you want it to specifically have the labels aligned to the left, then simply select the field and click "Left" in the "Label Align" option:

    Unable to align Label and text box correctly Image 3 Screenshot 62

     

    I hope that helps.

  • glandoreghyc
    Replied on June 22, 2016 at 11:33 AM

    OK, I must be loosing it....... that was set to Left .... i am positive...... i have been having other issues with my connection to the Jot Form site as i am on a VPN, i wonder if it picked up another VPN bug.....

     

    Sorry to put you to any trouble thanks..

     

    John

  • Charlie
    Replied on June 22, 2016 at 12:48 PM

    No need to apologize :) we're glad that everything is working in your end now. If you are still having problems about this, please let us know.

    I see you already have another thread opened about the VPN issue, it's on this link: https://www.jotform.com/answers/866423. I see there's already a discussion happening there, please refer to that link instead.

    For other concerns or questions, please do feel free to open a new thread here in the forum.

    Thank you.