Align and Adjust Fields Using CSS Codes

  • Sridor
    Asked on November 17, 2018 at 8:25 PM

    I tried the Advanced Form Editor and it made all my text boxes the same width. That was okay but it screwed up the Name Widget. I fooled around with the CSS but it pretty much sucks. I couldn't get the Last Name sub text under the Last field. 

    Is there a way to undo all the stuff the advanced editor did?

    Jotform Thread 1646433 Screenshot
  • Edgar_B
    Replied on November 17, 2018 at 9:38 PM

    Hello,

    I've inspected your form and checked the codes applied. It seems fine right now, have you figured out what went wrong? Upon checking in the screenshot you've provided it seem right, maybe you've just forgot to save your changes in the CSS area.

    1542507267test Screenshot 10

    If you wish to undo all the changes you've made in your form especially in the CSS area, you can just delete all the codes you've injected and it will revert your form to the point wherein no styling codes were applied.

    Please let us know if you need further assistance, we'll be glad to help. Thank you!


  • Sridor
    Replied on November 18, 2018 at 9:43 AM
    Look at the subtitle for Last Name.
      - Scott
        413 210-0032
    ...
  • Sridor
    Replied on November 18, 2018 at 10:43 AM
    Thank you.
    The Last Name subtitle is aligned okay in the Preview but is wrong in
    Builder mode.
    How do I undo the Advanced Editor changes (not just the CSS) and get it
    back to the layout settings I made using the Builder widget options?
    -Scott
    413 210-0032
    ...
  • John_Benson
    Replied on November 18, 2018 at 11:36 AM

    Please remove the custom CSS code to your form and replace it with this:

    #first_3 {

        width : 100% !important;

    }

    #last_3 {

        width : 100% !important;

    }

    To add a custom CSS code, please follow this guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    You can check and test my demo form: https://form.jotform.com/83214274871963


  • Sridor
    Replied on November 18, 2018 at 9:43 PM
    Thanks, and how do I undo the changes made in the advanced form editor?
      - Scott
        413 210-0032
    ...
  • Edgar_B
    Replied on November 18, 2018 at 10:13 PM

    Hello,

    If you wish to revert back your form to a certain saved point, I would suggest you to look after your Form Revision History. From here you can find all the time to time changes you have made to your form.

    If you need further assistance, please let us know, we'll be glad to help. Thank you!

  • Sridor
    Replied on November 19, 2018 at 9:43 AM
    I tried that (width 100% !important;} but it didn't help. The Advanced
    Editor screwed up all the text box widths and I can't adjust any of them
    now.
    https://www.jotform.com/build/83168781302155
    I've attached a screenshot.
    -Scott
    413 210-0032
    ...
  • arthurprc
    Replied on November 19, 2018 at 11:50 AM

    I think that I've found a solution that meets the requirements, please remove all the existing CSS code and add this one:

    #first_3 {

        width : 200% !important;

    }


    #last_3 {

        width : 200% !important;

        margin-left : 100%;

    }


    #sublabel_last {

        width : 200%;

        margin-left : 100%;

    }

    Don't hesitate to ask for help if you need further assistance.