What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Time field on my form squeezed and hard to view

    Asked by JuliaRogers on June 26, 2015 at 11:45 AM

    Can someone help me figure out why the time selector is so scrunched up?  You can't even read the word "at."  See pic.  Thank you,  Julie

    Page URL:
    https://secure.jotform.us/form/41661137696158

    Screenshot
    time field selector
  • Profile Image
    JotForm Support

    Answered by Kiran on June 26, 2015 at 02:33 PM

    Please try adding the following CSS code to your JotForm :

    #cid_317 > span:nth-child(4) {

    display: block !important;

    }

    #cid_318 > span:nth-child(4) {

    display: block !important;

    }

    The dates should be displayed as below after injecting the above CSS code.

    Hope this information helps.

  • Profile Image

    Answered by JuliaRogers on June 26, 2015 at 07:15 PM

    Sorry, this is not helpful.  Idk where to insert this code, and why should add'l code be required when it's a drag and drop field?  It didn't used to look like this.  Is there another alternative fix where I don't have to do the coding for jot form?

     

     

  • Profile Image
    JotForm Support

    Answered by Chriistian on June 26, 2015 at 09:51 PM

    Hi JuliaRogers, 

    Sorry for the inconvenience this has caused you. However, this is the only and fastest way to fix the issue. There is a conflicting CSS code in the form so we need to override the CSS for the fields to display properly. To add/inject custom CSS code provided above in your form, you can follow the instructions below.

     

    Do let us know if you need further assistance.

     

    Regards.

  • Profile Image

    Answered by JuliaRogers on June 30, 2015 at 02:35 PM

    I tried to this but I see a bunch of other code that's in there .

    Where do I place the code recommended above (2nd thread) within all the code that's in there now?

    Here's what I see now:

    @import "https://fonts.googleapis.com/css?family=Muli:light,lightitalic,normal,italic,bold,bolditalic";

    .form-all {

    font-family: "Muli", sans-serif;

    }

    .form-all {

    width: 750px;

    width: 100%;

    max-width: 750px;

    }

    .form-label-left,

    .form-label-right {

    width: 235px;

    }

    .form-label {

    white-space: normal;

    }

    .form-label.form-label-auto {

    display: block;

    float: none;

    text-align: left;

    }

    .form-label-left {

    display: inline-block;

    white-space: normal;

    float: left;

    text-align: left;

    }

    .form-label-right {

    display: inline-block;

    white-space: normal;

    float: left;

    text-align: right;

    }

    .form-label-top {

    white-space: normal;

    display: block;

    float: none;

    text-align: left;

    }

    .form-all {

    font-size: 14px;

    }

    .form-label {

    font-weight: normal;

    font-size: 0.95em;

    }

    .supernova {

    background-color: #f7f1f1;

    background-color: #ffffff;

    }

    .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) {

    .supernova .form-all {

    border: 1px solid #e6e6e6;

    -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) {

    .jotform-form {

    padding: 10px 0;

    }

    }

    /* | */

    /* | */

    @media screen and (min-width: 480px) and (max-width: 768px) {

    .jotform-form {

    padding: 30px 0;

    }

    }

    /* | */

    /* | */

    @media screen and (min-width: 768px) and (max-width: 1024px) {

    .jotform-form {

    padding: 60px 0;

    }

    }

    /* | */

    /* | */

    @media screen and (min-width: 1024px) {

    .jotform-form {

    padding: 90px 0;

    }

    }

    /* | */

    .supernova .form-all,

    .form-all {

    background-color: #f7f1f1;

    border: 1px solid transparent;

    }

    .form-header-group {

    border-color: #e4d1d1;

    }

    .form-matrix-table tr {

    border-color: #e4d1d1;

    }

    .form-matrix-table tr:nth-child(2n) {

    background-color: #eee1e1;

    }

    .form-all {

    color: #555555;

    }

    .form-header-group .form-header {

    color: #555555;

    }

    .form-header-group .form-subHeader {

    color: #6f6f6f;

    }

    .form-sub-label {

    color: #6f6f6f;

    }

    .form-label-top,

    .form-label-left,

    .form-label-right,

    .form-html {

    color: #6f6f6f;

    }

    .form-checkbox-item label,

    .form-radio-item label {

    color: #555555;

    }

    .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: #ffffe0;

    }

    /* ömer */

    .form-radio-item,

    .form-checkbox-item {

    padding-bottom: 0px !important;

    }

    .form-radio-item:last-child,

    .form-checkbox-item:last-child {

    padding-bottom: 0;

    }

    /* ömer */

    [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: 600px;

    }

    .form-radio-item,

    .form-checkbox-item {

    width: 100%;

    max-width: 600px;

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    }

    .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;

    }

    .form-multiple-column {

    width: 100%;

    }

    .form-multiple-column .form-radio-item,

    .form-multiple-column .form-checkbox-item {

    width: 10%;

    }

    .form-multiple-column[data-columncount="1"] .form-radio-item,

    .form-multiple-column[data-columncount="1"] .form-checkbox-item {

    width: 100%;

    }

    .form-multiple-column[data-columncount="2"] .form-radio-item,

    .form-multiple-column[data-columncount="2"] .form-checkbox-item {

    width: 50%;

    }

    .form-multiple-column[data-columncount="3"] .form-radio-item,

    .form-multiple-column[data-columncount="3"] .form-checkbox-item {

    width: 33.33333333%;

    }

    .form-multiple-column[data-columncount="4"] .form-radio-item,

    .form-multiple-column[data-columncount="4"] .form-checkbox-item {

    width: 25%;

    }

    .form-multiple-column[data-columncount="5"] .form-radio-item,

    .form-multiple-column[data-columncount="5"] .form-checkbox-item {

    width: 20%;

    }

    .form-multiple-column[data-columncount="6"] .form-radio-item,

    .form-multiple-column[data-columncount="6"] .form-checkbox-item {

    width: 16.66666667%;

    }

    .form-multiple-column[data-columncount="7"] .form-radio-item,

    .form-multiple-column[data-columncount="7"] .form-checkbox-item {

    width: 14.28571429%;

    }

    .form-multiple-column[data-columncount="8"] .form-radio-item,

    .form-multiple-column[data-columncount="8"] .form-checkbox-item {

    width: 12.5%;

    }

    .form-multiple-column[data-columncount="9"] .form-radio-item,

    .form-multiple-column[data-columncount="9"] .form-checkbox-item {

    width: 11.11111111%;

    }

    .form-single-column .form-checkbox-item,

    .form-single-column .form-radio-item {

    width: 100%;

    }

    .supernova {

    height: 100%;

    background-repeat: no-repeat;

    background-attachment: scroll;

    background-position: center top;

    background-repeat: repeat;

    }

    .supernova {

    background-image: none;

    background-image: url("http://www.jotform.com/uploads/JuliaRogers/form_files/pawprints.png");

    }

    #stage {

    background-image: none;

    background-image: url("http://www.jotform.com/uploads/JuliaRogers/form_files/pawprints.png");

    }

    /* | */

    .form-all {

    background-repeat: no-repeat;

    background-attachment: scroll;

    background-position: center top;

    background-repeat: repeat;

    }

    .form-header-group {

    background-repeat: no-repeat;

    background-attachment: scroll;

    background-position: center top;

    }

    .form-line {

    margin-top: 0px;

    margin-bottom: 0px;

    }

    .form-line {

    padding: 8px 36px;

    }

    .form-all {

    -webkit-border-radius: 0px;

    -moz-border-radius: 0px;

    border-radius: 0px;

    }

    .form-section:first-child {

    -webkit-border-radius: 0px 0px 0 0;

    -moz-border-radius: 0px 0px 0 0;

    border-radius: 0px 0px 0 0;

    }

    .form-section:last-child {

    -webkit-border-radius: 0 0 0px 0px;

    -moz-border-radius: 0 0 0px 0px;

    border-radius: 0 0 0px 0px;

    }

    .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: "Muli", sans-serif;

    font-size: 14px;

    font-weight: normal;

    }

    .form-all .form-pagebreak-back,

    .form-all .form-pagebreak-next {

    font-size: 1em;

    padding: 9px 15px;

    font-family: "Arial", sans-serif;

    font-size: 14px;

    font-weight: normal;

    border: none;

    border-width: 5px !important;

    border-style: dotted !important;

    border-color: false !important;

    }

    .form-all .form-pagebreak-back,

    .form-all .form-pagebreak-next {

    color: #ffffff !important;

    background: #ff6600;

    box-shadow: none;

    text-shadow: none;

    }

    /*

    & when ( @buttonFontType = google ) {

    @import (css) "@{buttonFontLink}";

    }

    */

    h2.form-header {

    line-height: 1.618em;

    font-size: 1.714em;

    }

    h2 ~ .form-subHeader {

    line-height: 1.5em;

    font-size: 1.071em;

    }

    .form-header-group {

    text-align: left;

    }

    .form-line {

    zoom: 1;

    }

    .form-line:before,

    .form-line:after {

    display: table;

    content: '';

    line-height: 0;

    }

    .form-line:after {

    clear: both;

    }

    .form-sub-label-container {

    margin-right: 0;

    float: left;

    white-space: nowrap;

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    }

    .form-sub-label-container .date-separate {

    visibility: hidden;

    }

    .form-captcha input,

    .form-spinner input {

    width: 322px;

    }

    .form-textbox,

    .form-textarea {

    width: 100%;

    max-width: 322px;

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    }

    .form-input,

    .form-address-table,

    .form-matrix-table {

    width: 100%;

    max-width: 322px;

    }

    .form-radio-item,

    .form-checkbox-item {

    width: 100%;

    max-width: 322px;

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    }

    .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;

    }

    .form-multiple-column {

    width: 100%;

    }

    .form-multiple-column .form-radio-item,

    .form-multiple-column .form-checkbox-item {

    width: 10%;

    }

    .form-multiple-column[data-columncount="1"] .form-radio-item,

    .form-multiple-column[data-columncount="1"] .form-checkbox-item {

    width: 100%;

    }

    .form-multiple-column[data-columncount="2"] .form-radio-item,

    .form-multiple-column[data-columncount="2"] .form-checkbox-item {

    width: 50%;

    }

    .form-multiple-column[data-columncount="3"] .form-radio-item,

    .form-multiple-column[data-columncount="3"] .form-checkbox-item {

    width: 33.33333333%;

    }

    .form-multiple-column[data-columncount="4"] .form-radio-item,

    .form-multiple-column[data-columncount="4"] .form-checkbox-item {

    width: 25%;

    }

    .form-multiple-column[data-columncount="5"] .form-radio-item,

    .form-multiple-column[data-columncount="5"] .form-checkbox-item {

    width: 20%;

    }

    .form-multiple-column[data-columncount="6"] .form-radio-item,

    .form-multiple-column[data-columncount="6"] .form-checkbox-item {

    width: 16.66666667%;

    }

    .form-multiple-column[data-columncount="7"] .form-radio-item,

    .form-multiple-column[data-columncount="7"] .form-checkbox-item {

    width: 14.28571429%;

    }

    .form-multiple-column[data-columncount="8"] .form-radio-item,

    .form-multiple-column[data-columncount="8"] .form-checkbox-item {

    width: 12.5%;

    }

    .form-multiple-column[data-columncount="9"] .form-radio-item,

    .form-multiple-column[data-columncount="9"] .form-checkbox-item {

    width: 11.11111111%;

    }

    [data-type="control_dropdown"] .form-dropdown {

    width: 100% !important;

    max-width: 322px;

    }

    [data-type="control_fullname"] .form-sub-label-container {

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    width: 48%;

    }

    [data-type="control_fullname"] .form-sub-label-container:first-child {

    margin-right: 4%;

    }

    [data-type="control_phone"] .form-sub-label-container {

    width: 65%;

    }

    [data-type="control_phone"] .form-sub-label-container:first-child {

    width: 32.5%;

    margin-right: 2.5%;

    }

    [data-type="control_birthdate"] .form-sub-label-container {

    width: 22%;

    margin-right: 3%;

    }

    [data-type="control_birthdate"] .form-sub-label-container:first-child {

    width: 50%;

    }

    [data-type="control_birthdate"] .form-sub-label-container:last-child {

    margin-right: 0;

    }

    [data-type="control_birthdate"] .form-sub-label-container .form-dropdown {

    width: 100%;

    }

    [data-type="control_time"] .form-sub-label-container {

    width: 37%;

    margin-right: 3%;

    }

    [data-type="control_time"] .form-sub-label-container:last-child {

    width: 20%;

    margin-right: 0;

    }

    [data-type="control_time"] .form-sub-label-container .form-dropdown {

    width: 100%;

    }

    [data-type="control_datetime"] .form-sub-label-container {

    width: 28%;

    margin-right: 4%;

    }

    [data-type="control_datetime"] .form-sub-label-container:last-child {

    width: 4%;

    margin-right: 0;

    }

    [data-type="control_datetime"].allowTime .form-sub-label-container {

    width: 12%;

    margin-right: 3%;

    }

    [data-type="control_datetime"].allowTime .form-sub-label-container:last-child {

    width: 4%;

    margin-right: 0;

    }

    [data-type="control_datetime"].allowTime span .form-sub-label-container:first-child {

    width: 3%;

    }

    [data-type="control_datetime"].allowTime span .form-sub-label-container:last-child {

    width: 12%;

    margin-right: 3%;

    }

    [data-type="control_datetime"].allowTime .form-dropdown {

    width: 100%;

    }

    [data-type="control_payment"] .form-sub-label-container {

    width: auto;

    }

    [data-type="control_payment"] .form-sub-label-container .form-dropdown {

    width: 100%;

    }

    .form-address-table td .form-dropdown {

    width: 100%;

    }

    .form-address-table td .form-sub-label-container {

    width: 96%;

    }

    .form-address-table td:last-child .form-sub-label-container {

    margin-left: 4%;

    }

    .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,*/

    .form-captcha input,

    .form-spinner input,

    .form-error-message {

    padding: 4px 3px 2px 3px;

    }

    .form-header-group {

    font-family: "Muli", sans-serif;

    }

    .form-section {

    padding: 0px 5px 0px 5px;

    }

    .form-header-group {

    margin: 12px 36px 12px 36px;

    }

    .form-header-group {

    padding: 24px 0px 24px 0px;

    }

    .form-header-group .form-header,

    .form-header-group .form-subHeader {

    color: #ff6600;

    }

    .form-textbox,

    .form-textarea {

    padding: 4px 3px 2px 3px;

    }

    .form-textbox,

    .form-textarea,

    .form-radio-other-input,

    .form-checkbox-other-input,

    .form-captcha input,

    .form-spinner input {

    background-color: #ffffff;

    }

    .form-textbox,

    .form-textarea {

    width: 100%;

    max-width: 322px;

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    }

    [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: 322px;

    }

    [data-type="control_fullname"] .form-sub-label-container {

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    width: 48%;

    }

    [data-type="control_fullname"] .form-sub-label-container:first-child {

    margin-right: 4%;

    }

    [data-type="control_phone"] .form-sub-label-container {

    width: 65%;

    }

    [data-type="control_phone"] .form-sub-label-container:first-child {

    width: 32.5%;

    margin-right: 2.5%;

    }

    [data-type="control_phone"] .form-sub-label-container .date-separate {

    visibility: hidden;

    }

    [data-type="control_datetime"] .form-sub-label-container {

    width: 28%;

    margin-right: 4%;

    }

    [data-type="control_datetime"] .form-sub-label-container:last-child {

    width: 4%;

    margin-right: 0;

    }

    [data-type="control_datetime"] .form-sub-label-container .date-separate {

    visibility: hidden;

    }

    [data-type="control_datetime"].allowTime .form-sub-label-container {

    width: 12%;

    margin-right: 3%;

    }

    [data-type="control_datetime"].allowTime .form-sub-label-container:last-child {

    width: 4%;

    margin-right: 0;

    }

    [data-type="control_datetime"].allowTime span .form-sub-label-container:first-child {

    width: 3%;

    }

    [data-type="control_datetime"].allowTime span .form-sub-label-container:last-child {

    width: 12%;

    margin-right: 3%;

    }

    [data-type="control_datetime"].allowTime .form-dropdown {

    width: 100%;

    }

    .form-matrix-table {

    width: 100%;

    max-width: 322px;

    }

    .form-address-table {

    width: 100%;

    max-width: 322px;

    }

    .form-address-table td .form-dropdown {

    width: 100%;

    }

    .form-address-table td .form-sub-label-container {

    width: 96%;

    }

    .form-address-table td:last-child .form-sub-label-container {

    margin-left: 4%;

    }

    .form-address-table td[colspan="2"] .form-sub-label-container {

    width: 100%;

    margin: 0;

    }

    [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: 175px;

    }

    [data-type="control_dropdown"] .form-dropdown {

    width: 100% !important;

    max-width: 175px;

    }

    [data-type="control_birthdate"] .form-sub-label-container {

    width: 22%;

    margin-right: 3%;

    }

    [data-type="control_birthdate"] .form-sub-label-container:first-child {

    width: 50%;

    }

    [data-type="control_birthdate"] .form-sub-label-container:last-child {

    margin-right: 0;

    }

    [data-type="control_birthdate"] .form-sub-label-container .form-dropdown {

    width: 100%;

    }

    [data-type="control_time"] .form-sub-label-container {

    width: 37%;

    margin-right: 3%;

    }

    [data-type="control_time"] .form-sub-label-container:last-child {

    width: 20%;

    margin-right: 0;

    }

    [data-type="control_time"] .form-sub-label-container .form-dropdown {

    width: 100%;

    }

    .form-label {

    margin-bottom: 0px;

    margin-right: 0;

    }

    .form-label {

    font-family: "Muli", sans-serif;

    }

    li[data-type="control_image"] div {

    text-align: left;

    }

    li[data-type="control_image"] img {

    border: none;

    border-width: 0px !important;

    border-style: solid !important;

    border-color: false !important;

    }

    .form-line-column {

    width: auto;

    }

    .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: #fff4f4;

    }

    .form-line-error .form-error-message {

    background-color: #ff3200;

    clear: both;

    float: none;

    }

    .form-line-error .form-error-message .form-error-arrow {

    border-bottom-color: #ff3200;

    }

    .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;

    }

    .form-all {

    position: relative;

    }

    .form-all:before {

    content: "";

    background-image: url("http://www.jotform.com/uploads/JuliaRogers/form_files/DocupetPkgingLogo.jpg");

    display: inline-block;

    height: 90px;

    position: absolute;

    background-size: 179px 90px;

    background-repeat: no-repeat;

    width: 100%;

    }

    .form-all {

    margin-top: 100px;

    }

    .form-all:before {

    top: -100px;

    left: 0;

    background-position: top left;

    }

    .ie-8 .form-all {

    margin-top: auto;

    margin-top: initial;

    }

    .ie-8 .form-all:before {

    display: none;

    }

    /* | */

    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {

    .jotform-form {

    padding: 0;

    }

    .form-all {

    border: 0;

    width: 100%;

    max-width: initial;

    }

    .form-sub-label-container {

    width: 100%;

    margin: 0;

    }

    .form-input {

    width: 100%;

    }

    .form-label {

    width: 100%!important;

    }

    .form-line {

    padding: 2% 5%;

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    }

    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;

    max-width: initial !important;

    }

    .form-input,

    .form-input-wide,

    .form-textarea,

    .form-textbox,

    .form-dropdown {

    max-width: initial !important;

    }

    div.form-header-group {

    padding: 24px 0px !important;

    margin: 0 12px 2% !important;

    margin-left: 5% !important;

    margin-right: 5% !important;

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    }

    [data-type="control_button"] {

    margin-bottom: 0 !important;

    }

    .form-buttons-wrapper {

    margin: 0!important;

    }

    .form-buttons-wrapper button {

    width: 100%;

    }

    table {

    width: 100%!important;

    max-width: initial !important;

    }

    table td + td {

    padding-left: 3%;

    }

    .form-checkbox-item input,

    .form-radio-item input {

    width: auto;

    }

    .form-collapse-table {

    margin: 0 5%;

    }

    }

    /* | *//*__INSPECT_SEPERATOR__*/

    div#cid_7.form-input {

    width : 210px;

    height : 192px;

    }@media screen and (max-width: 770px){

    li.form-line[data-type="control_datetime"] > .form-input-wide > span:nth-child(4) {

    float : left;

    width : 40px;

     

    }}

  • Profile Image
    JotForm Support

    Answered by Welvin on June 30, 2015 at 03:21 PM

    At the bottom of the existing codes.

    Thanks

  • Profile Image

    Answered by JuliaRogers on July 10, 2015 at 07:04 PM

    I installed the code, but it's still not right.  The word "at" between the date and time fields is hidden on the form that is filled out, and when you look at the date and time in the form builder the date/time is still scrunched up.  Please help. Thank you

  • Profile Image
    JotForm Support

    Answered by Chriistian on July 10, 2015 at 09:31 PM

    Hi JuliaRogers,

     

    I checked your form and I see that the time in the DateTime field was displayed properly. See screenshot below.

     

    There might be some conflicting CSS in the Form Builder to your form CSS that may cause the date and time to be crunched up in the Form Builder view. Can you try previewing the form in a new tab (Click Preview > Open in New Tab or accessing the direct link of the form) and see if the time in the DateTime field is displayed properly? If the issue still persists, can you try clearing the form cache and browser cache and see if it helps?

     

    If it is still not displayed properly after clearing the cache, can you provide to us the browser version and device you are using when you access the form so we can further check the issue? 

     

    We will wait for your response.

     

    Regards.

  • Profile Image

    Answered by JuliaRogers on July 22, 2015 at 12:26 PM

    Hello, I'm still having trouble with the form.  The time selector is still overlapping and scrunched together.  This image is on the jot form side "edit" feature, not on the form in the URL

  • Profile Image
    JotForm Support

    Answered by david on July 22, 2015 at 01:36 PM

    Since there is a theme applied to your form as well as the CSS, the CSS applied by the theme is being shown in edit mode.  The CSS my colleagues had you apply is overwriting the previous code when the form is loaded.  This is why it looks different in edit mode than it does in preview mode.  Short of removing the theme from your form, there is not much we can do about how it looks in edit mode.