Time field on my form squeezed and hard to view

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

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.

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?

 

 

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.

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;

 

}}

At the bottom of the existing codes.

Thanks

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

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.

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

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.