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

    Problem with calendar fields width

    Asked by thelittleyurtmeadow on January 07, 2015 at 03:19 PM

    Hi there, 

     

    I've created a booking form and included a date entry. Everything looks great on preview and on jotform, however; when I embed it onto my website, all 3 columns for the date end up being very wide and end up seperating.

     

    No matter what I do, i cannot correct this. 

     

    Can you please help?

     

    Find attached a screen print so you can see what I mean.

     

    Thanks

     

    Sophie

    Screenshot
    booking form date field width
  • Profile Image

    Answered by Ben on January 07, 2015 at 04:46 PM

    Hi Sophie,

    Can you please provide us with the link to the page on your website where the jotform is embedded to be able to create the right codes for your issue and help you resolve this?

    Best Regards,
    Ben

  • Profile Image

    Answered by thelittleyurtmeadow on January 09, 2015 at 05:47 AM

    Hi, 

    sorry, link is:

    http://www.thelittleyurtmeadow.co.uk/the-yurts-copy

     

    please excuse page as it's currently incomplete.

     

    Thanks

     

    Soph

  • Profile Image

    Answered by Ben on January 09, 2015 at 09:12 AM

    Hi Sophie,

    I took a look at the page and believe that this would help you with sorting out the date fields:

    li[data-type="control_datetime"] input {
        display: inline;
        max-width: 70px;
        width: 70px;
    }
    li[data-type="control_datetime"] .form-sub-label-container {
        width: 80px;
    }

    To apply the CSS code above to your jotform please follow these steps: Inject Custom CSS Codes

    Do let us know how it goes.

    Best Regards,
    Ben

  • Profile Image

    Answered by thelittleyurtmeadow on January 12, 2015 at 04:42 AM

    Thank you...

    I've just inputted this and now I have a slight difference in the layout of date fields. THe year box is slightly off centre compared to the others. 

    See webpage.

     

    http://www.thelittleyurtmeadow.co.uk/the-yurts-copy

     

    Thanks

     

    SOph

  • Profile Image
    JotForm Support

    Answered by Welvin on January 12, 2015 at 06:18 AM

    Hi Sophie,

    I've fixed it for you by replacing the custom CSS codes to the following:

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

    width: 20%;

    margin-right: 2%;

    }

     

    input[name$="[day]"] {

    width: 60%;

    }

    input[name$="[month]"] {

    width: 60%;

    }

    input[name$="[year]"] {

    width: 95%;

    }

    Kindly check and let us know if there are problems in the layout.

    Thanks