Auto-fit form to width of any device (inject CSS?)

  • Profile Image
    GCfacilityops
    Asked on January 06, 2014 at 03:16 AM

    Does anyone know if this is possible? I have found this line but I don't know if/how it works in jotform..

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user- scalable=0" />

  • Profile Image
    EltonCris
    Answered on January 06, 2014 at 09:32 AM

    Hi,

    That code is added on every forms when you use your stand alone form. You can check that on your form source code, e.g. http://www.jotform.co/form/33635714840859

    ---

    If you'd like to auto-fit the form width (and input width) to any device including desktop, you can use the following CSS codes and inject it to your form.

    .form-textarea,

    .form-textbox,

    .form-dropdown{

    width: 100% !important;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    }

    .form-label-left, .form-label-right{

    width: auto !important;

    }

    .form-input {

    width: 100% !important;

    }

    .form-all{

    width: 95% !important;

    }

    .form-sub-label-container {

    width: 100% !important;

    }

    If you want to exclude desktop device, you can use specific media queries for mobiles. Just let us know if this is what you want.

    Thanks!

  • Profile Image
    GCfacilityops
    Answered on January 06, 2014 at 04:48 PM

    Thanks EltonCris. I have noticed that the form fields auto-fit to device screens but the only issue I have is getting an image to auto-fit with the rest of the form. And it doesn't help that I am not very experienced with coding.

    What I would like is to have the image/form width defined at 600 when opened on a computer, and for it to auto-fit on any other device. 

    Is this possible?

    I tried injecting the code you provided but the image still did not auto-fit.

  • Profile Image
    Mike_T
    Answered on January 06, 2014 at 05:22 PM

    I have cloned your form and added the following CSS:

    @media only screen and (max-device-width: 550px) {
    .form-image {
    width: 100%;
    }
    }

    It seems to be working as expected:

    http://form.jotformpro.com/form/40056442791958

    Thank you.

  • Profile Image
    GCfacilityops
    Answered on January 06, 2014 at 10:24 PM

    Thanks Mike, really thank you.

    Last question, can I now define the height of the image on devices in hopes to maintain the aspect ratio of the image I'm using as a header? Alternatively, can we scale the image size to auto-fit instead of only shrinking the width?

  • Profile Image
    Welvin
    Answered on January 07, 2014 at 01:57 AM

    Hi,

    Instead of the codes given by my colleague above, use this one:

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

    .form-image {

    width: auto;

    height: auto

    }

    }

    Let us know here for the results. The above codes should auto fit the image.

    Thanks

  • Profile Image
    GCfacilityops
    Answered on January 07, 2014 at 02:28 AM

    Thanks Welvin. Your code is exactly what I was after, except I used "width: 100%; height: auto".

    For anyone else who wants to get an image to auto-fit to any device smaller than your form's static width, follow the instructions in this thread.

    Can I add a string for user scalable?

  • Profile Image
    Welvin
    Answered on January 07, 2014 at 03:59 AM

    You are welcome. Both should work best for your requirements.

    User scalable is already added to our form. If you need that to your website, then I think you can go ahead and add that.

    Thanks