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

    Mobile rendering issue - portrait mode

    Asked by xaviersolutions on September 20, 2012 at 01:47 AM

    I have two forms on my site at www.xavier-solutions.com that are cut off on the right side in portrait mode. This happens when I view the demo and request pages via the stock browser on my Samsung Galaxy Note 5.3" phone running Android 4.0 (ICS). It does not happen when I use the mobile Chrome browser. I also noticed the industrial dark theme I am using has some text color issues, as some of the text should be white when it is light brown/black, so it is hard to see. Please advise. Thanks.

    Page URL:
    www.xavier-solutions.com/demo-request-2

    Screenshot
  • Profile Image
    JotForm Support

    Answered by idarktech on September 20, 2012 at 03:24 AM

    @xaviersolutions

    Inject the following CSS codes to your form. Hope this would help.

     

    .form-textbox, .form-textarea, .form-upload, .form-dropdown, .form-matrix-column-headers, .form-matrix-row-headers, .form-matrix-values {

    width: 100% !important;

    }

    .form-all{

    width:50% !important;

    }

    .form-address-table {

    width: 50% !important;

    }

    #id_11 .form-sub-label-container {

    white-space:normal !important;

    }

    #id_11 table tbody tr td span.form-sub-label-container{

    width:100%;

    }

    #input_11_city, #input_11_postal{

    width: 95% !important;

    }

    .form-line-error {

    background: none !important;

    }

    .form-label-left {

    color: white !important;

    }

    .form-line-active{

    background: none !important;

    }

    .form-error-message {

    max-width: 170px !important;

    min-width: 150px !important;

    }

    Let us know if something went wrong so we can further assist you. Thanks!

  • Profile Image

    Answered by xaviersolutions on September 20, 2012 at 03:49 PM

    Ok, much better, however, the state & county in the address area are screwed up.  They are basically on top of each other, which makes it hard to read & select.  The colors have not been updated with this code.  Was that fix in the code?  Please advise.  Thanks.

  • Profile Image
    JotForm Support

    Answered by Mike_T on September 20, 2012 at 06:28 PM

    You can try the following code to increase the size of the Address field, and change the color to white. I have highlighted the changes to the Idarktech's code.

    .form-textbox, .form-textarea, .form-upload, .form-dropdown, .form-matrix-column-headers, .form-matrix-row-headers, .form-matrix-values {
    width: 100% !important;

    }

    .form-all {
    width:50% !important;

    }

    .form-address-table {
    width: 75% !important;

    }

    #id_11 .form-sub-label-container {
    white-space:normal !important;

    }

    #id_11 table tbody tr td span.form-sub-label-container {
    width:100%;

    }

    #input_11_city, #input_11_postal {
    width: 95% !important;

    }

    .form-line-error {
    background: none !important;

    }

    .form-label-left {
    color: white !important;

    }

    .form-line-active {
    background: none !important;

    }

    .form-error-message {
    max-width: 170px !important;
    min-width: 150px !important;

    }

    .form-radio-item label, .form-checkbox-item label, .form-grading-label, .form-header {
    color:white !important;

    }

    Also you can add the following code to the second form in order to get rid of that black color.

     

    .form-radio-item label, .form-checkbox-item label, .form-grading-label, .form-header {
    color:white !important;

    }

    Thank you for using our services.

  • Profile Image
    JotForm Support

    Answered by idarktech on September 20, 2012 at 09:02 PM

    @xaviersolutions,

    I've added some fix for the screwed fields and also inlcuded Mike's code. Please replace all your CSS codes to this:

    http://pastie.org/pastes/4766083/text

    Let us know if you need anything else. Thanks!

  • Profile Image

    Answered by on September 25, 2012 at 12:36 AM

    Looks great.  Do you have a fix for the submit & clear form buttons to make them center for the general request form?  They are right justified vs. centered.  Thanks.

  • Profile Image
    JotForm Support

    Answered by idarktech on September 25, 2012 at 01:02 AM

    You just need to set the button alignment to "center", you can do this in the form builder but I have made the changes for you. It should be fine now.

    Thanks!

  • Profile Image

    Answered by xaviersolutions on September 25, 2012 at 01:20 AM

    Thanks!