Mobile rendering issue - portrait mode

  • Profile Image
    xaviersolutions
    Asked 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.

  • Profile Image
    idarktech
    Answered 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
    xaviersolutions
    Answered 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
    Mike_T
    Answered 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
    idarktech
    Answered 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 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
    idarktech
    Answered 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
    xaviersolutions
    Answered on September 25, 2012 at 01:20 AM

    Thanks!