I am having a formatting alignment error.

  • Profile Image
    Jpappasllc
    Asked on October 16, 2019 at 02:20 PM

    Can you please help me with an issue that I am experiencing.  The formatting for my Jotform is not aligning correctly and after trying a few different things to resolve it, I have not been able to do so.  Please see my attached photo below.  The form just looks ugly and is not aligned with the background.  Can you please show me how to fix it?!

    Screenshot
  • Profile Image
    AndrewHag
    Answered on October 16, 2019 at 04:02 PM

    Please add the CSS code below in the widget custom CSS tab:

    #list tbody:first-child > tr:first-child {display: none;} #list {width: 100%; border-collapse: collapse;} #list tbody:first-child > tr > td{display:block; padding: 6px 0;} #list tbody:first-child > tr + tr + tr {border-top: 1px solid #ccc;} #list > tbody:first-child tr td.col1 {padding-top: 20px;} .mobileColumnName {display: inline-block; padding-bottom: 4px; width: 90%; box-sizing: border-box;} .mobileColumnName + input, .mobileColumnName + textarea, .mobileColumnName + select, .mobileColumnName + .radio-container, .mobileColumnName + .checkbox-container, .mobileColumnName + .dateContainer {width: 60%; display: inline-block; box-sizing: border-box; vertical-align:top; box-shadow:none;} .buttonsColumn {text-align: right;}

    1571256083The Easiest Online Form Builde

    Then go to Form Designer > Styles > Custom CSS and add this CSS code:

    iframe#customFieldFrame_12{

    width: 100% !important;

    }

    1571256163The Easiest Online Form Builde

  • Profile Image
    AndrewHag
    Answered on October 16, 2019 at 04:05 PM

    Alternatively, you can just increase the width of the form to fit the widget. Just go to Form Designer > Styles and increase the Form Width.

    1571256280The Easiest Online Form Builde