How does the 2 columns work?

brightimages

Asked on November 18, 2014 at 7:29 PM

My form is called ::: FMS Order Form

I did shrink to fit on the first 8 fields and the 2 columns show up when I'm editing to form. But when I preview the form it doesn't show the 2 columns.

I also went in to the 'form designer' and under form layout I've selected 2 columns as well. Where is the css coding going wrong?

My code is below :::

<script src="//max.jotfor.ms/static/prototype.forms.js" type="text/javascript"></script>
<script src="//max.jotfor.ms/static/jotform.forms.js?3.2.4371" type="text/javascript"></script>
<script src="//max.jotfor.ms/js/vendor/math-processor.js?v=3.2.4371" type="text/javascript"></script>
<script type="text/javascript">
   JotForm.setCalculations([{"decimalPlaces":"2","equation":"","ignoreHiddenFields":"","insertAsText":"","newCalculationType":"1","operands":"","readOnly":"1","resultField":"25","showBeforeInput":"","showEmptyDecimals":""}]);
   JotForm.init(function(){
      $('input_15').hint('ex: myname@example.com');
   });
</script>
<link href="http://max.jotfor.ms/static/formCss.css?3.2.4371" rel="stylesheet" type="text/css" />
<link type="text/css" media="print" rel="stylesheet" href="http://max.jotfor.ms/css/printForm.css?3.2.4371" />
<style type="text/css">
    .form-label-left{
        width:100px !important;
    }
    .form-line{
        padding-top:12px;
        padding-bottom:12px;
    }
    .form-label-right{
        width:100px !important;
    }
    .form-all{
        width:835px;
        color:#FFFFFF !important;
        font-family:'Helvetica';
        font-size:16px;
    }
    .form-radio-item label, .form-checkbox-item label, .form-grading-label, .form-header{
        color: #FFFFFF;
    }

    /* Injected CSS Code */
/* line 82, https://www.jotform.com/themes/css/style.less */
.form-all {
font-family: "Helvetica", sans-serif;
}
/* line 115, https://www.jotform.com/themes/css/style.less */
.form-all {
width: 835px;
width: 100%;
max-width: 835px;
}
/* line 131, https://www.jotform.com/themes/css/style.less */
.form-label-left,
.form-label-right {
width: 100px;
}
/* line 142, https://www.jotform.com/themes/css/style.less */
.form-label {
white-space: normal;
}
/* line 144, https://www.jotform.com/themes/css/style.less */
.form-label.form-label-auto {
display: inline-block;
float: left;
text-align: left;
width: 100px;
}
/* line 168, https://www.jotform.com/themes/css/style.less */
.form-label-left {
display: inline-block;
white-space: normal;
float: left;
text-align: left;
}
/* line 175, https://www.jotform.com/themes/css/style.less */
.form-label-right {
display: inline-block;
white-space: normal;
float: left;
text-align: right;
}
/* line 182, https://www.jotform.com/themes/css/style.less */
.form-label-top {
white-space: normal;
display: block;
float: none;
text-align: left;
}
/* line 195, https://www.jotform.com/themes/css/style.less */
.form-all {
font-size: 16px;
}
/* line 207, https://www.jotform.com/themes/css/style.less */
.form-label {
font-weight: bold;
}
/* line 211, https://www.jotform.com/themes/css/style.less */
.form-checkbox-item label,
.form-radio-item label {
font-weight: normal;
}
/* line 278, https://www.jotform.com/themes/css/style.less */
.supernova {
background-color: #0f6598;
}
/* line 280, https://www.jotform.com/themes/css/style.less */
.supernova body {
background-color: transparent;
}
/*
@width30: (unit(@formWidth, px) + 60px);
@width60: (unit(@formWidth, px)+ 120px);
@width90: (unit(@formWidth, px)+ 180px);
*/
/* | */
@media screen and (min-width: 480px) {
/* line 296, https://www.jotform.com/themes/css/style.less */
.supernova {
    background-color: #303030;
}
/* line 300, https://www.jotform.com/themes/css/style.less */
.supernova .form-all {
    border: 1px solid #161616;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.1);
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.1);
}
}
/* | */
/* | */
@media screen and (max-width: 480px) {
/* line 316, https://www.jotform.com/themes/css/style.less */
.jotform-form {
    padding: 10px 0;
}
}
/* | */
/* | */
@media screen and (min-width: 480px) and (max-width: 768px) {
/* line 322, https://www.jotform.com/themes/css/style.less */
.jotform-form {
    padding: 30px 0;
}
}
/* | */
/* | */
@media screen and (min-width: 768px) and (max-width: 1024px) {
/* line 328, https://www.jotform.com/themes/css/style.less */
.jotform-form {
    padding: 60px 0;
}
}
/* | */
/* | */
@media screen and (min-width: 1024px) {
/* line 334, https://www.jotform.com/themes/css/style.less */
.jotform-form {
    padding: 90px 0;
}
}
/* | */
/* line 343, https://www.jotform.com/themes/css/style.less */
.form-all {
background-color: #0f6598;
border: 1px solid transparent;
}
/* line 349, https://www.jotform.com/themes/css/style.less */
.form-header-group {
border-color: #0a466a;
}
/* line 354, https://www.jotform.com/themes/css/style.less */
.form-matrix-table tr {
border-color: #0a466a;
}
/* line 356, https://www.jotform.com/themes/css/style.less */
.form-matrix-table tr:nth-child(2n) {
background-color: #0d5681;
}
/* line 369, https://www.jotform.com/themes/css/style.less */
.form-all {
color: #ffffff;
}
/* line 374, https://www.jotform.com/themes/css/style.less */
.form-header-group .form-header {
color: #ffffff;
}
/* line 377, https://www.jotform.com/themes/css/style.less */
.form-header-group .form-subHeader {
color: #ffffff;
}
/* line 382, https://www.jotform.com/themes/css/style.less */
.form-sub-label {
color: #ffffff;
}
/* line 388, https://www.jotform.com/themes/css/style.less */
.form-label-top,
.form-label-left,
.form-label-right {
color: #ffffff;
}
/* line 395, https://www.jotform.com/themes/css/style.less */
.form-checkbox-item label,
.form-radio-item label {
color: #ffffff;
}
/* line 424, https://www.jotform.com/themes/css/style.less */
.form-line.form-line-active {
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease;
-moz-transition-timing-function: ease;
-ms-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease;
background-color: #094e77;
}
/* ömer */
/* line 432, https://www.jotform.com/themes/css/style.less */
.form-radio-item,
.form-checkbox-item {
padding-bottom: 0px !important;
}
/* line 434, https://www.jotform.com/themes/css/style.less */
.form-radio-item:last-child,
.form-checkbox-item:last-child {
padding-bottom: 0;
}
/* ömer */
/*.ctrl-custom-size(@bgSize, @tickSize, @tickOffsetTop, @tickOffsetLeft, @radius) {

    input {
        display: none;
    }

    label {
        position: relative;
        margin-left: 0;
    }

    label:before {
        content: '';
        position: relative;
        display: inline-block;
        vertical-align: baseline;
        margin-right: 4px;
        .border-box();
        .rounded(@radius);

        width: @bgSize;
        height: @bgSize;
    }

    label:after {
        content: '';
        position: absolute;
        z-index: 10;
        display: inline-block;
        opacity: 0;

        top:@tickOffsetTop;
        left:@tickOffsetLeft;
        width: @tickSize;
        height: @tickSize;
        .rounded(@radius);
    }

    input:checked + label:after {
        opacity: 1;
    }

}*/
/* line 499, https://www.jotform.com/themes/css/style.less */
[data-type="control_radio"] .form-input,
[data-type="control_checkbox"] .form-input,
[data-type="control_radio"] .form-input-wide,
[data-type="control_checkbox"] .form-input-wide {
width: 100%;
max-width: 210px;
}
/* line 507, https://www.jotform.com/themes/css/style.less */
.form-radio-item,
.form-checkbox-item {
width: 100%;
max-width: 210px;
white-space: nowrap;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* line 516, https://www.jotform.com/themes/css/style.less */
.form-textbox.form-radio-other-input,
.form-textbox.form-checkbox-other-input {
width: 80%;
margin-left: 3%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* line 536, https://www.jotform.com/themes/css/style.less */
.form-multiple-column {
width: 100%;
}
/* line 539, https://www.jotform.com/themes/css/style.less */
.form-multiple-column .form-radio-item,
.form-multiple-column .form-checkbox-item {
width: 10%;
}
/* line 527, https://www.jotform.com/themes/css/style.less */
.form-multiple-column[data-columncount="1"] .form-radio-item,
.form-multiple-column[data-columncount="1"] .form-checkbox-item {
width: 100%;
}
/* line 527, https://www.jotform.com/themes/css/style.less */
.form-multiple-column[data-columncount="2"] .form-radio-item,
.form-multiple-column[data-columncount="2"] .form-checkbox-item {
width: 50%;
}
/* line 527, https://www.jotform.com/themes/css/style.less */
.form-multiple-column[data-columncount="3"] .form-radio-item,
.form-multiple-column[data-columncount="3"] .form-checkbox-item {
width: 33.33333333%;
}
/* line 527, https://www.jotform.com/themes/css/style.less */
.form-multiple-column[data-columncount="4"] .form-radio-item,
.form-multiple-column[data-columncount="4"] .form-checkbox-item {
width: 25%;
}
/* line 527, https://www.jotform.com/themes/css/style.less */
.form-multiple-column[data-columncount="5"] .form-radio-item,
.form-multiple-column[data-columncount="5"] .form-checkbox-item {
width: 20%;
}
/* line 527, https://www.jotform.com/themes/css/style.less */
.form-multiple-column[data-columncount="6"] .form-radio-item,
.form-multiple-column[data-columncount="6"] .form-checkbox-item {
width: 16.66666667%;
}
/* line 527, https://www.jotform.com/themes/css/style.less */
.form-multiple-column[data-columncount="7"] .form-radio-item,
.form-multiple-column[data-columncount="7"] .form-checkbox-item {
width: 14.28571429%;
}
/* line 527, https://www.jotform.com/themes/css/style.less */
.form-multiple-column[data-columncount="8"] .form-radio-item,
.form-multiple-column[data-columncount="8"] .form-checkbox-item {
width: 12.5%;
}
/* line 527, https://www.jotform.com/themes/css/style.less */
.form-multiple-column[data-columncount="9"] .form-radio-item,
.form-multiple-column[data-columncount="9"] .form-checkbox-item {
width: 11.11111111%;
}
/* line 671, https://www.jotform.com/themes/css/style.less */
.form-single-column .form-checkbox-item,
.form-single-column .form-radio-item {
width: 100%;
}
/* line 1184, https://www.jotform.com/themes/css/style.less */
.supernova {
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center top;
background-repeat: repeat;
}
/* | */
@media screen and (min-width: 480px) {
/* line 1207, https://www.jotform.com/themes/css/style.less */
.supernova {
    background-image: url("//static-interlogyllc.netdna-ssl.com/themes/img/blank.gif");
}
}
/* line 1214, https://www.jotform.com/themes/css/style.less */
#stage {
background-image: url("//static-interlogyllc.netdna-ssl.com/themes/img/blank.gif");
}
/* | */
/* line 1228, https://www.jotform.com/themes/css/style.less */
.form-all {
background-image: url("//static-interlogyllc.netdna-ssl.com/themes/img/blank.gif");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center top;
background-repeat: repeat;
}
/* line 1257, https://www.jotform.com/themes/css/style.less */
.form-header-group {
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center top;
}
/* line 1284, https://www.jotform.com/themes/css/style.less */
.form-line {
margin-top: 4px;
margin-bottom: 4px;
}
/* line 1302, https://www.jotform.com/themes/css/style.less */
.form-line {
padding: 16px 10px;
}
/* line 1316, https://www.jotform.com/themes/css/style.less */
.form-all .form-textbox,
.form-all .form-radio-other-input,
.form-all .form-checkbox-other-input,
.form-all .form-captcha input,
.form-all .form-spinner input,
.form-all .form-pagebreak-back,
.form-all .form-pagebreak-next,
.form-all .qq-upload-button,
.form-all .form-error-message {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
/* line 1328, https://www.jotform.com/themes/css/style.less */
.form-all .form-sub-label {
margin-left: 3px;
}
/* line 1333, https://www.jotform.com/themes/css/style.less */
.form-all .form-textarea {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
/* line 1381, https://www.jotform.com/themes/css/style.less */
.form-dropdown {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-appearance: none;
-moz-appearance: button;
appearance: none;
margin: 0;
}
/* line 1395, https://www.jotform.com/themes/css/style.less */
.form-all {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
/* line 1399, https://www.jotform.com/themes/css/style.less */
.form-section:first-child {
-webkit-border-radius: 20px 20px 0 0;
-moz-border-radius: 20px 20px 0 0;
border-radius: 20px 20px 0 0;
}
/* line 1402, https://www.jotform.com/themes/css/style.less */
.form-section:last-child {
-webkit-border-radius: 0 0 20px 20px;
-moz-border-radius: 0 0 20px 20px;
border-radius: 0 0 20px 20px;
}
/* line 1430, https://www.jotform.com/themes/css/style.less */
.form-all .qq-upload-button,
.form-all .form-submit-button,
.form-all .form-submit-reset,
.form-all .form-submit-print {
font-size: 1em;
padding: 9px 15px;
font-family: "Helvetica", sans-serif;
font-size: 16px;
font-weight: normal;
}
/* line 1569, https://www.jotform.com/themes/css/style.less */
.form-all .form-pagebreak-back,
.form-all .form-pagebreak-next {
font-size: 1em;
padding: 9px 15px;
font-family: "Helvetica", sans-serif;
font-size: 16px;
font-weight: normal;
}
/*
    TODO: Significant improvement possibility:

    following import statement is not required in design mode,
    but it should be inside the exported css of current design, in the form itself
    when it is shown to people. Being of this here, causing re-drawn problems.
    we should find a way to only include this in css send while saving current design

    see prepareModel4Save for implementation for @buttonFontType
*/
/*
& when ( @buttonFontType = google ) {
    @import (css) "@{buttonFontLink}";
}
*/
/* line 1706, https://www.jotform.com/themes/css/style.less */
h2.form-header {
line-height: 1.618em;
font-size: 1.714em;
}
/* line 1713, https://www.jotform.com/themes/css/style.less */
h2 ~ .form-subHeader {
line-height: 1.5em;
font-size: 1.071em;
}
/* line 1727, https://www.jotform.com/themes/css/style.less */
.form-header-group {
text-align: left;
}
/* line 1738, https://www.jotform.com/themes/css/style.less */
.form-header-group {
background-image: url("//static-interlogyllc.netdna-ssl.com/themes/img/blank.gif");
}
/* line 1755, https://www.jotform.com/themes/css/style.less */
.form-sub-label-container {
margin-right: 0;
float: left;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* line 1761, https://www.jotform.com/themes/css/style.less */
.form-captcha input,
.form-spinner input {
width: 210px;
}
/* line 1767, https://www.jotform.com/themes/css/style.less */
.form-textbox,
.form-textarea {
width: 100%;
max-width: 210px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* line 1774, https://www.jotform.com/themes/css/style.less */
.form-input,
.form-address-table,
.form-matrix-table {
width: 100%;
max-width: 210px;
}
/* line 1782, https://www.jotform.com/themes/css/style.less */
.form-radio-item,
.form-checkbox-item {
width: 100%;
max-width: 210px;
white-space: nowrap;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* line 1791, https://www.jotform.com/themes/css/style.less */
.form-textbox.form-radio-other-input,
.form-textbox.form-checkbox-other-input {
width: 80%;
margin-left: 3%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* line 1811, https://www.jotform.com/themes/css/style.less */
.form-multiple-column {
width: 100%;
}
/* line 1814, https://www.jotform.com/themes/css/style.less */
.form-multiple-column .form-radio-item,
.form-multiple-column .form-checkbox-item {
width: 10%;
}
/* line 1802, https://www.jotform.com/themes/css/style.less */
.form-multiple-column[data-columncount="1"] .form-radio-item,
.form-multiple-column[data-columncount="1"] .form-checkbox-item {
width: 100%;
}
/* line 1802, https://www.jotform.com/themes/css/style.less */
.form-multiple-column[data-columncount="2"] .form-radio-item,
.form-multiple-column[data-columncount="2"] .form-checkbox-item {
width: 50%;
}
/* line 1802, https://www.jotform.com/themes/css/style.less */
.form-multiple-column[data-columncount="3"] .form-radio-item,
.form-multiple-column[data-columncount="3"] .form-checkbox-item {
width: 33.33333333%;
}
/* line 1802, https://www.jotform.com/themes/css/style.less */
.form-multiple-column[data-columncount="4"] .form-radio-item,
.form-multiple-column[data-columncount="4"] .form-checkbox-item {
width: 25%;
}
/* line 1802, https://www.jotform.com/themes/css/style.less */
.form-multiple-column[data-columncount="5"] .form-radio-item,
.form-multiple-column[data-columncount="5"] .form-checkbox-item {
width: 20%;
}
/* line 1802, https://www.jotform.com/themes/css/style.less */
.form-multiple-column[data-columncount="6"] .form-radio-item,
.form-multiple-column[data-columncount="6"] .form-checkbox-item {
width: 16.66666667%;
}
/* line 1802, https://www.jotform.com/themes/css/style.less */
.form-multiple-column[data-columncount="7"] .form-radio-item,
.form-multiple-column[data-columncount="7"] .form-checkbox-item {
width: 14.28571429%;
}
/* line 1802, https://www.jotform.com/themes/css/style.less */
.form-multiple-column[data-columncount="8"] .form-radio-item,
.form-multiple-column[data-columncount="8"] .form-checkbox-item {
width: 12.5%;
}
/* line 1802, https://www.jotform.com/themes/css/style.less */
.form-multiple-column[data-columncount="9"] .form-radio-item,
.form-multiple-column[data-columncount="9"] .form-checkbox-item {
width: 11.11111111%;
}
/* line 1824, https://www.jotform.com/themes/css/style.less */
[data-type="control_dropdown"] .form-dropdown {
/*width: 100% !important;
        max-width: unit(@inputWidth, px);*/
width: 210px !important;
max-width: 100%;
}
/* line 1832, https://www.jotform.com/themes/css/style.less */
[data-type="control_fullname"] .form-sub-label-container {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 48%;
}
/* line 1836, https://www.jotform.com/themes/css/style.less */
[data-type="control_fullname"] .form-sub-label-container:first-child {
margin-right: 4%;
}
/* line 1841, https://www.jotform.com/themes/css/style.less */
[data-type="control_phone"] .form-sub-label-container {
width: 65%;
}
/* line 1844, https://www.jotform.com/themes/css/style.less */
[data-type="control_phone"] .form-sub-label-container:first-child {
width: 32.5%;
margin-right: 2.5%;
}
/* line 1851, https://www.jotform.com/themes/css/style.less */
[data-type="control_birthdate"] .form-sub-label-container {
width: 22%;
margin-right: 3%;
}
/* line 1854, https://www.jotform.com/themes/css/style.less */
[data-type="control_birthdate"] .form-sub-label-container:first-child {
width: 50%;
}
/* line 1857, https://www.jotform.com/themes/css/style.less */
[data-type="control_birthdate"] .form-sub-label-container:last-child {
margin-right: 0;
}
/* line 1861, https://www.jotform.com/themes/css/style.less */
[data-type="control_birthdate"] .form-sub-label-container .form-dropdown {
width: 100%;
}
/* line 1867, https://www.jotform.com/themes/css/style.less */
[data-type="control_time"] .form-sub-label-container {
width: 37%;
margin-right: 3%;
}
/* line 1871, https://www.jotform.com/themes/css/style.less */
[data-type="control_time"] .form-sub-label-container:last-child {
width: 20%;
margin-right: 0;
}
/* line 1876, https://www.jotform.com/themes/css/style.less */
[data-type="control_time"] .form-sub-label-container .form-dropdown {
width: 100%;
}
/* line 1883, https://www.jotform.com/themes/css/style.less */
[data-type="control_datetime"] .form-sub-label-container {
width: 12%;
margin-right: 3%;
}
/* line 1887, https://www.jotform.com/themes/css/style.less */
[data-type="control_datetime"] .form-sub-label-container:last-child {
width: 3%;
margin-right: 0;
}
/* line 1895, https://www.jotform.com/themes/css/style.less */
[data-type="control_datetime"] span .form-sub-label-container:first-child {
width: 4%;
}
/* line 1898, https://www.jotform.com/themes/css/style.less */
[data-type="control_datetime"] span .form-sub-label-container:last-child {
width: 12%;
margin-right: 3%;
}
/* line 1904, https://www.jotform.com/themes/css/style.less */
[data-type="control_datetime"] .form-dropdown {
width: 100%;
}
/* line 1911, https://www.jotform.com/themes/css/style.less */
[data-type="control_payment"] .form-sub-label-container {
width: auto;
}
/* line 1914, https://www.jotform.com/themes/css/style.less */
[data-type="control_payment"] .form-sub-label-container .form-dropdown {
width: 100%;
}
/* line 1922, https://www.jotform.com/themes/css/style.less */
.form-address-table td .form-dropdown {
width: 100%;
}
/* line 1926, https://www.jotform.com/themes/css/style.less */
.form-address-table td .form-sub-label-container {
width: 96%;
}
/* line 1930, https://www.jotform.com/themes/css/style.less */
.form-address-table td:last-child .form-sub-label-container {
margin-left: 4%;
}
/* line 1934, https://www.jotform.com/themes/css/style.less */
.form-address-table td[colspan="2"] .form-sub-label-container {
width: 100%;
margin: 0;
}
/*.form-dropdown,
.form-radio-item,
.form-checkbox-item,
.form-radio-other-input,
.form-checkbox-other-input,*/
/* line 2022, https://www.jotform.com/themes/css/style.less */
.form-captcha input,
.form-spinner input,
.form-error-message {
padding: 4px 3px 2px 3px;
}
/* line 2037, https://www.jotform.com/themes/css/style.less */
.form-header-group {
font-family: "Helvetica", sans-serif;
}
/* line 2058, https://www.jotform.com/themes/css/style.less */
.form-section {
padding: 0px 0px 0px 0px;
}
/* line 2069, https://www.jotform.com/themes/css/style.less */
.form-header-group {
margin: 12px 36px 12px 36px;
}
/* line 2080, https://www.jotform.com/themes/css/style.less */
.form-header-group {
padding: 24px 0px 24px 0px;
}
/* line 2123, https://www.jotform.com/themes/css/style.less */
.form-textbox,
.form-textarea {
padding: 4px 3px 2px 3px;
}
/* line 2149, https://www.jotform.com/themes/css/style.less */
.form-textbox,
.form-textarea,
.form-radio-other-input,
.form-checkbox-other-input,
.form-captcha input,
.form-spinner input {
background-color: #fbeabd;
}
/* line 2177, https://www.jotform.com/themes/css/style.less */
.form-textbox,
.form-textarea {
width: 100%;
max-width: 215px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* line 2193, https://www.jotform.com/themes/css/style.less */
[data-type="control_textbox"] .form-input,
[data-type="control_textarea"] .form-input,
[data-type="control_fullname"] .form-input,
[data-type="control_phone"] .form-input,
[data-type="control_datetime"] .form-input,
[data-type="control_address"] .form-input,
[data-type="control_email"] .form-input,
[data-type="control_passwordbox"] .form-input,
[data-type="control_autocomp"] .form-input,
[data-type="control_textbox"] .form-input-wide,
[data-type="control_textarea"] .form-input-wide,
[data-type="control_fullname"] .form-input-wide,
[data-type="control_phone"] .form-input-wide,
[data-type="control_datetime"] .form-input-wide,
[data-type="control_address"] .form-input-wide,
[data-type="control_email"] .form-input-wide,
[data-type="control_passwordbox"] .form-input-wide,
[data-type="control_autocomp"] .form-input-wide {
width: 100%;
max-width: 215px;
}
/* line 2201, https://www.jotform.com/themes/css/style.less */
[data-type="control_fullname"] .form-sub-label-container {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 48%;
}
/* line 2205, https://www.jotform.com/themes/css/style.less */
[data-type="control_fullname"] .form-sub-label-container:first-child {
margin-right: 4%;
}
/* line 2210, https://www.jotform.com/themes/css/style.less */
[data-type="control_phone"] .form-sub-label-container {
width: 65%;
}
/* line 2213, https://www.jotform.com/themes/css/style.less */
[data-type="control_phone"] .form-sub-label-container:first-child {
width: 32.5%;
margin-right: 2.5%;
}
/* line 2220, https://www.jotform.com/themes/css/style.less */
[data-type="control_datetime"] .form-sub-label-container {
width: 12%;
margin-right: 3%;
}
/* line 2224, https://www.jotform.com/themes/css/style.less */
[data-type="control_datetime"] .form-sub-label-container:last-child {
width: 3%;
margin-right: 0;
}
/* line 2232, https://www.jotform.com/themes/css/style.less */
[data-type="control_datetime"] span .form-sub-label-container:first-child {
width: 4%;
}
/* line 2235, https://www.jotform.com/themes/css/style.less */
[data-type="control_datetime"] span .form-sub-label-container:last-child {
width: 12%;
margin-right: 3%;
}
/* line 2241, https://www.jotform.com/themes/css/style.less */
[data-type="control_datetime"] .form-dropdown {
width: 100%;
}
/* line 2247, https://www.jotform.com/themes/css/style.less */
.form-matrix-table {
width: 100%;
max-width: 215px;
}
/* line 2253, https://www.jotform.com/themes/css/style.less */
.form-address-table {
width: 100%;
max-width: 215px;
}
/* line 2257, https://www.jotform.com/themes/css/style.less */
.form-address-table td .form-dropdown {
width: 100%;
}
/* line 2261, https://www.jotform.com/themes/css/style.less */
.form-address-table td .form-sub-label-container {
width: 96%;
}
/* line 2265, https://www.jotform.com/themes/css/style.less */
.form-address-table td:last-child .form-sub-label-container {
margin-left: 4%;
}
/* line 2269, https://www.jotform.com/themes/css/style.less */
.form-address-table td[colspan="2"] .form-sub-label-container {
width: 100%;
margin: 0;
}
/*@textInputStyle: "ti-default";
@textInputBorderWidth: -1;
@textInputBorderStyle: -1;
@clrTextInputBorder: -1;
@clrTextInputBg: -1;
@clrTextInputFont: -1;
@textInputHeight: -1;
@textAreaHeight: -1;

& when ( @formControlStyle = ti-default ) {

}*/
/* line 2303, https://www.jotform.com/themes/css/style.less */
.form-dropdown {
border-width: 1px;
border-style: inset;
-webkit-appearance: menulist-button;
background-color: #fbeabd;
}
/* line 2348, https://www.jotform.com/themes/css/style.less */
[data-type="control_dropdown"] .form-input,
[data-type="control_birthdate"] .form-input,
[data-type="control_time"] .form-input,
[data-type="control_dropdown"] .form-input-wide,
[data-type="control_birthdate"] .form-input-wide,
[data-type="control_time"] .form-input-wide {
width: 100%;
max-width: 210px;
}
/* line 2356, https://www.jotform.com/themes/css/style.less */
[data-type="control_dropdown"] .form-dropdown {
/*width: 100% !important;
        max-width: unit(@dropdownWidth, px);*/
width: 210px !important;
max-width: 100%;
}
/* line 2364, https://www.jotform.com/themes/css/style.less */
[data-type="control_birthdate"] .form-sub-label-container {
width: 22%;
margin-right: 3%;
}
/* line 2367, https://www.jotform.com/themes/css/style.less */
[data-type="control_birthdate"] .form-sub-label-container:first-child {
width: 50%;
}
/* line 2370, https://www.jotform.com/themes/css/style.less */
[data-type="control_birthdate"] .form-sub-label-container:last-child {
margin-right: 0;
}
/* line 2374, https://www.jotform.com/themes/css/style.less */
[data-type="control_birthdate"] .form-sub-label-container .form-dropdown {
width: 100%;
}
/* line 2380, https://www.jotform.com/themes/css/style.less */
[data-type="control_time"] .form-sub-label-container {
width: 37%;
margin-right: 3%;
}
/* line 2384, https://www.jotform.com/themes/css/style.less */
[data-type="control_time"] .form-sub-label-container:last-child {
width: 20%;
margin-right: 0;
}
/* line 2389, https://www.jotform.com/themes/css/style.less */
[data-type="control_time"] .form-sub-label-container .form-dropdown {
width: 100%;
}
/* line 2399, https://www.jotform.com/themes/css/style.less */
.form-dropdown {
margin: 0;
border-color: #a6a6a6;
-webkit-appearance: menulist!important;
-moz-appearance: menulist!important;
appearance: menulist!important;
border-width: 1px;
}
/* line 2704, https://www.jotform.com/themes/css/style.less */
.form-label {
font-family: "Helvetica", sans-serif;
}
/* line 2724, https://www.jotform.com/themes/css/style.less */
li[data-type="control_image"] div {
text-align: left;
}
/* line 2728, https://www.jotform.com/themes/css/style.less */
li[data-type="control_image"] img {
border: none;
border-width: 0px !important;
border-style: solid !important;
border-color: false !important;
}
/* line 2770, https://www.jotform.com/themes/css/style.less */
.form-line-column {
width: auto;
width: 50%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* line 2786, https://www.jotform.com/themes/css/style.less */
.form-line-column.form-col-1 {
padding-left: 10px;
padding-right: 5px;
}
/* line 2791, https://www.jotform.com/themes/css/style.less */
.form-line-column.form-col-0 {
padding-left: 5px;
padding-right: 10px;
}
/* line 2786, https://www.jotform.com/themes/css/style.less */
.form-line-column.form-col-3 {
padding-left: 10px;
padding-right: 5px;
}
/* line 2791, https://www.jotform.com/themes/css/style.less */
.form-line-column.form-col-2 {
padding-left: 5px;
padding-right: 10px;
}
/* line 2786, https://www.jotform.com/themes/css/style.less */
.form-line-column.form-col-5 {
padding-left: 10px;
padding-right: 5px;
}
/* line 2791, https://www.jotform.com/themes/css/style.less */
.form-line-column.form-col-4 {
padding-left: 5px;
padding-right: 10px;
}
/* line 2786, https://www.jotform.com/themes/css/style.less */
.form-line-column.form-col-7 {
padding-left: 10px;
padding-right: 5px;
}
/* line 2791, https://www.jotform.com/themes/css/style.less */
.form-line-column.form-col-6 {
padding-left: 5px;
padding-right: 10px;
}
/* line 2786, https://www.jotform.com/themes/css/style.less */
.form-line-column.form-col-9 {
padding-left: 10px;
padding-right: 5px;
}
/* line 2791, https://www.jotform.com/themes/css/style.less */
.form-line-column.form-col-8 {
padding-left: 5px;
padding-right: 10px;
}
/* line 2786, https://www.jotform.com/themes/css/style.less */
.form-line-column.form-col-11 {
padding-left: 10px;
padding-right: 5px;
}
/* line 2791, https://www.jotform.com/themes/css/style.less */
.form-line-column.form-col-10 {
padding-left: 5px;
padding-right: 10px;
}
/* line 2786, https://www.jotform.com/themes/css/style.less */
.form-line-column.form-col-13 {
padding-left: 10px;
padding-right: 5px;
}
/* line 2791, https://www.jotform.com/themes/css/style.less */
.form-line-column.form-col-12 {
padding-left: 5px;
padding-right: 10px;
}
/* line 2786, https://www.jotform.com/themes/css/style.less */
.form-line-column.form-col-15 {
padding-left: 10px;
padding-right: 5px;
}
/* line 2791, https://www.jotform.com/themes/css/style.less */
.form-line-column.form-col-14 {
padding-left: 5px;
padding-right: 10px;
}
/* line 2786, https://www.jotform.com/themes/css/style.less */
.form-line-column.form-col-17 {
padding-left: 10px;
padding-right: 5px;
}
/* line 2791, https://www.jotform.com/themes/css/style.less */
.form-line-column.form-col-16 {
padding-left: 5px;
padding-right: 10px;
}
/* line 2786, https://www.jotform.com/themes/css/style.less */
.form-line-column.form-col-19 {
padding-left: 10px;
padding-right: 5px;
}
/* line 2791, https://www.jotform.com/themes/css/style.less */
.form-line-column.form-col-18 {
padding-left: 5px;
padding-right: 10px;
}
/* line 2786, https://www.jotform.com/themes/css/style.less */
.form-line-column.form-col-21 {
padding-left: 10px;
padding-right: 5px;
}
/* line 2791, https://www.jotform.com/themes/css/style.less */
.form-line-column.form-col-20 {
padding-left: 5px;
padding-right: 10px;
}
/* line 2815, https://www.jotform.com/themes/css/style.less */
.form-line-error {
overflow: hidden;
-webkit-transition-property: none;
-moz-transition-property: none;
-ms-transition-property: none;
-o-transition-property: none;
transition-property: none;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease;
-moz-transition-timing-function: ease;
-ms-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease;
background-color: #a63030;
}
/* line 2820, https://www.jotform.com/themes/css/style.less */
.form-line-error .form-error-message {
background-color: #ff3200;
width: 150px;
clear: both;
float: none;
}
/* line 2825, https://www.jotform.com/themes/css/style.less */
.form-line-error .form-error-message .form-error-arrow {
border-bottom-color: #ff3200;
}
/* line 2830, https://www.jotform.com/themes/css/style.less */
.form-line-error input:not(#coupon-input),
.form-line-error textarea,
.form-line-error .form-validation-error {
border: 1px solid #ff3200;
-webkit-box-shadow: 0 0 3px #ff3200;
-moz-box-shadow: 0 0 3px #ff3200;
box-shadow: 0 0 3px #ff3200;
}
/* | */
@media screen and (max-width: 768px) {
/* line 3096, https://www.jotform.com/themes/css/style.less */
.form-all {
    border: 0;
    width: 100%;
}
/* line 3097, https://www.jotform.com/themes/css/style.less */
.form-sub-label-container {
    width: 100%;
    margin: 0;
}
/* line 3098, https://www.jotform.com/themes/css/style.less */
.form-input {
    width: 100%;
}
/* line 3099, https://www.jotform.com/themes/css/style.less */
.form-label {
    width: 100%!important;
}
/* line 3100, https://www.jotform.com/themes/css/style.less */
.form-line {
    padding: 2% 5%;
    margin: 0;
}
/* line 3101, https://www.jotform.com/themes/css/style.less */
input[type=text],
input[type=email],
input[type=tel],
textarea {
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
/* line 3102, https://www.jotform.com/themes/css/style.less */
.form-header-group {
    padding: 3% 0!important;
    margin: 5%!important;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
/* line 3103, https://www.jotform.com/themes/css/style.less */
.form-buttons-wrapper {
    margin: 0!important;
}
/* line 3104, https://www.jotform.com/themes/css/style.less */
.form-buttons-wrapper button {
    width: 100%;
}
/* line 3106, https://www.jotform.com/themes/css/style.less */
table {
    width: 100%!important;
}
/* line 3107, https://www.jotform.com/themes/css/style.less */
table td + td {
    padding-left: 3%;
}
/* line 3110, https://www.jotform.com/themes/css/style.less */
.form-checkbox-item input,
.form-radio-item input {
    width: auto;
}
}
/* | */

/*__INSPECT_SEPERATOR__*/

    /* Injected CSS Code */
</style>

<link type="text/css" rel="stylesheet" href="http://max.jotfor.ms/css/responsive.css?3.2.4371" />
<link type="text/css" rel="stylesheet" href="http://jotform.us/css/styles/buttons/form-submit-button-light_rounded.css?3.2.4371"/>
<form class="jotform-form" action="http://submit.jotform.us/submit/43217214288150/" method="post" name="form_43217214288150" id="43217214288150" accept-charset="utf-8">
<input type="hidden" name="formID" value="43217214288150" />
<div class="form-all">
    <ul class="form-section">
      <li class="form-line" data-type="control_image" id="id_23">
        <div id="cid_23" class="form-input-wide">
          <img alt="How does the 2 columns work? Image-0" class="form-image" border="0" src="https://www.jotform.com/uploads/brightimages/form_files/headerNewLogo-BACKGROUND.jpg" height="148.2" width="725" />
        </div>
      </li>
      <li class="form-line form-line-column form-col-1" data-type="control_dropdown" id="id_17">
        <label class="form-label form-label-top" id="label_17" for="input_17"> FMS Level 1 Manual: Version 4 </label>
        <div id="cid_17" class="form-input-wide">
          <select class="form-dropdown" style="width:100px" id="input_17" name="q17_fmsLevel">
            <option calcValue="Click to edit" value=""> </option>
            <option value="ORDER"> ORDER </option>
          </select>
        </div>
      </li>
      <li class="form-line form-line-column form-col-2" data-type="control_textbox" id="id_19">
        <label class="form-label form-label-top" id="label_19" for="input_19"> Quantity </label>
        <div id="cid_19" class="form-input-wide">
          <input type="text" class=" form-textbox" data-type="input-textbox" id="input_19" name="q19_quantity" size="5" value="" />
        </div>
      </li>
      <li class="form-line form-line-column form-col-3" data-type="control_dropdown" id="id_18">
        <label class="form-label form-label-top" id="label_18" for="input_18"> FMS Level 2 Manual: Version 5 </label>
        <div id="cid_18" class="form-input-wide">
          <select class="form-dropdown" style="width:100px" id="input_18" name="q18_fmsLevel18">
            <option value=""> </option>
            <option value="ORDER"> ORDER </option>
          </select>
        </div>
      </li>
      <li class="form-line form-line-column form-col-4" data-type="control_textbox" id="id_20">
        <label class="form-label form-label-top" id="label_20" for="input_20"> Quantity </label>
        <div id="cid_20" class="form-input-wide">
          <input type="text" class=" form-textbox" data-type="input-textbox" id="input_20" name="q20_quantity20" size="5" value="" />
        </div>
      </li>
      <li class="form-line form-line-column form-col-5" data-type="control_dropdown" id="id_5">
        <label class="form-label form-label-top" id="label_5" for="input_5"> SFMA Manual </label>
        <div id="cid_5" class="form-input-wide">
          <select class="form-dropdown" style="width:100px" id="input_5" name="q5_sfmaManual5">
            <option value=""> </option>
            <option value="ORDER"> ORDER </option>
          </select>
        </div>
      </li>
      <li class="form-line form-line-column form-col-6" data-type="control_textbox" id="id_24">
        <label class="form-label form-label-top" id="label_24" for="input_24"> Quantity </label>
        <div id="cid_24" class="form-input-wide">
          <input type="text" class=" form-textbox" data-type="input-textbox" id="input_24" name="q24_quantity24" size="5" value="" />
        </div>
      </li>
      <li class="form-line form-line-column form-col-1 form-line-column-clear" data-type="control_dropdown" id="id_7">
        <label class="form-label form-label-top" id="label_7" for="input_7"> ADVANCED SFMA Manual </label>
        <div id="cid_7" class="form-input-wide">
          <select class="form-dropdown" style="width:100px" id="input_7" name="q7_advancedSfma7">
            <option value=""> </option>
            <option value="ORDER"> ORDER </option>
          </select>
        </div>
      </li>
      <li class="form-line form-line-column form-col-2" data-type="control_textbox" id="id_22">
        <label class="form-label form-label-top" id="label_22" for="input_22"> Quantity </label>
        <div id="cid_22" class="form-input-wide">
          <input type="text" class=" form-textbox" data-type="input-textbox" id="input_22" name="q22_quantity22" size="5" value="" />
        </div>
      </li>
      <li class="form-line form-line-column form-col-3" data-type="control_textarea" id="id_16">
        <label class="form-label form-label-top" id="label_16" for="input_16"> Order Notes </label>
        <div id="cid_16" class="form-input-wide">
          <textarea id="input_16" class="form-textarea" name="q16_orderNotes16" cols="255" rows="6"></textarea>
        </div>
      </li>
      <li class="form-line form-line-column form-col-1 form-line-column-clear" data-type="control_fullname" id="id_14">
        <label class="form-label form-label-top" id="label_14" for="input_14">
          Ordered By
          <span class="form-required">
            *
          </span>
        </label>
        <div id="cid_14" class="form-input-wide">
          <span class="form-sub-label-container">
            <input class="form-textbox validate[required]" type="text" size="10" name="q14_orderedBy[first]" id="first_14" />
            <label class="form-sub-label" for="first_14" id="sublabel_first"> First Name </label>
          </span>
          <span class="form-sub-label-container">
            <input class="form-textbox validate[required]" type="text" size="15" name="q14_orderedBy[last]" id="last_14" />
            <label class="form-sub-label" for="last_14" id="sublabel_last"> Last Name </label>
          </span>
        </div>
      </li>
      <li class="form-line form-line-column form-col-2" data-type="control_email" id="id_15">
        <label class="form-label form-label-top" id="label_15" for="input_15">
          E-mail
          <span class="form-required">
            *
          </span>
        </label>
        <div id="cid_15" class="form-input-wide">
          <input type="email" class=" form-textbox validate[required, Email]" id="input_15" name="q15_email15" size="30" value="" />
        </div>
      </li>
      <li class="form-line" data-type="control_button" id="id_2">
        <div id="cid_2" class="form-input-wide">
          <div style="text-align:center" class="form-buttons-wrapper">
            <button id="input_2" type="submit" class="form-submit-button form-submit-button-light_rounded">
              Submit
            </button>
          </div>
        </div>
      </li>
      <li style="display:none">
        Should be Empty:
        <input type="text" name="website" value="" />
      </li>
    </ul>
</div>
<input type="hidden" id="simple_spc" name="simple_spc" value="43217214288150" />
<script type="text/javascript">
document.getElementById("si" + "mple" + "_spc").value = "43217214288150-43217214288150";
</script>
</form>
jonathan

Replied on November 18, 2014 at 9:48 PM

Hi,

In your jotform http://www.jotform.us/form/43217214288150 make sure to set the 'Responsive Form' option to NO. This should fix the issue.

I did that on a test form and it fixes the problem and the 2 columns now works.

Hope this help. Inform us if issue remains.

Thanks.