Form length/height iframe problem w/mobile site

  • Profile Image
    amazing2061
    Asked on November 12, 2013 at 05:08 PM

    I have adjusted the iframe code to make it shorter but it still displays way too much space at the bottom of the form no matter what height I adjust it to. The site in question is a mobile site and I am viewing it with an iPhone 5. To view the form just tap on the panel that reads "Book An Appointment" It looks OK on a Desktop computer but when viewed with a mobile phone it becomes too long. Since I have the form/iframe code inserted withina jquery accordion panel I think that is affecting it. Would appreciate any suggestions.

  • Profile Image
    EltonCris
    Answered on November 12, 2013 at 07:17 PM

    Hi there!

    Thank you for the clear details about te problem.

    Our form comes with mobile CSS that automatically renders on mobile device. This makes the form a bit longer on mobile view since they are optimized to avoid possible cut off on mobile device. Every fields of your form displays under its field labels as this is how it's designed on mobile CSS. However, to prevent this, simply inject the following CSS codes to your form.

    @media only screen and (max-device-width: 550px){

    .form-label-left{

    float: left !important;

    display:inline !important;

    }

    }

    Guide:How to Inject Custom CSS Codes to your Form

    If this doesn't make any difference, let us know here so we can further assist you. Thank you!

  • Profile Image
    amazing2061
    Answered on November 12, 2013 at 09:21 PM

    Thank you for your reply. I injected/copied and pasted the code you provided and seems to have little to no effect. Here is all the code in the custom css panel:

    @media only screen and (max-device-width: 550px){.form-label-left{float: left !important;display:inline !important;}}

    .form-line {padding-left: 0px !important;}

    .form-all {padding-top: 2px;}.form-line-error {

    background:none repeat scroll 0 0;

    }

    .form-error-message {

    background: #EEE !important;

    }

    .form-error-arrow-inner {

    border-color: transparent transparent #EEE;

    }

    .form-validation-error {

    background-color:#FFF;

    border:1px solid #0697d6;

    -moz-box-shadow:0 0 2px #0697d6;

    -webkit-box-shadow: 0 0 2px #0697d6;

    box-shadow: 0 0 2px #0697d6;

    }.form-required {

    margin-left: 5px;

    color: #0697d6;

    }

  • Profile Image
    amazing2061
    Answered on November 13, 2013 at 01:30 AM

    UPDATE. Never mind. I am just going to use the form link instead. Thank you EltonCris for your help. really appreciated it.