The form "Membership Form" is cropped on some OS

  • Profile Image
    GeoffB
    Asked on March 02, 2013 at 05:03 AM

    I've created a form "membership form" and using MS IE9 and Firefox prove to be very good and everything is seen, on Chrome and Android some lines of text are cropped off at the ends and not viewable, I suspect iPad is the same but unable to try this out. I have narrowed the form but this doesn't seem to make any difference on the problem OS. Is there something wrong with my form or is it a compatability problem?

     

    Geoff

  • Profile Image
    sidharth_kch
    Answered on March 02, 2013 at 06:07 AM

    @ GeoffB

    You need to inject a CSS code.

    To do this please go to your Form Style>> Preferences >> Form Styles and in Inject custom CCS section please add this code:

    .form-line-column

    {

    white-space: normal !important;

    }

    This should resolve your issue.

    Thanks,

    Sidharth

  • Profile Image
    GeoffB
    Answered on March 02, 2013 at 06:20 AM

    Well done Sidharth ... that seemed to do the trick on Chrome and Android thanks very much... I think this will be of interest to a lot of others.

  • Profile Image
    sidharth_kch
    Answered on March 02, 2013 at 07:43 AM

    Great, we are glad to see your form is working as desired.

    Have a Great Weekend.

     

    Thanks,

    Sidharth

  • Profile Image
    earthdaysf
    Answered on March 02, 2013 at 04:42 PM

    is there a permanent solution to this problem?

  • Profile Image
    glennlee
    Answered on March 02, 2013 at 08:21 PM

    @earthdaysf

    As far as I know, browsers are have different specification to another browser so we have to adjust the form CSS just fit in to all browsers. Please follow my colleague's instruction above.

    Thanks. 

  • Profile Image
    earthdaysf
    Answered on March 02, 2013 at 08:49 PM

    as far as i know, css, html, and javascript can include browser-specific code which automatically adjusts itself, depending on the type of browser. for example:

    IPAD:

    @media only screen and (device-width: 768px) {
      /* For general iPad layouts */
    }
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
      /* For portrait layouts only */
    }
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
      /* For landscape layouts only */
    }

     

    Here's a complete list of browser-specific hacks:

    http://paulirish.com/2009/browser-specific-css-hacks/

    Any chance jotform could build these kinds of tweaks into your forms? This would really be helpful to users who don't know how to code, or don't have time (that's why we love jotform :) 

    thanks

  • Profile Image
    glennlee
    Answered on March 02, 2013 at 08:59 PM

    Thanks for your suggestion. I will forward this thread to our next level supporters and it will added to our feature wishlist.

    Thanks again.

  • Profile Image
    earthdaysf
    Answered on March 02, 2013 at 09:30 PM

    Great!

    Many thanks.

  • Profile Image
    EltonCris
    Answered on March 02, 2013 at 09:46 PM

    @earthdaysf

    Thanks!

    Our forms are already optimized for mobile devices. It works properly on iphones and smartphones. We already had the CSS version for mobile types like you've provided (you can view it on the form css stylesheet when you search "@" http://cdn.jotfor.ms/min/g=formCss?3.1.1904). However, if you'd like it to work on some devices specifically or to customize it further (like if any issues arises when the form is embedded), you can inject custom CSS codes to your form. Note that we already support "at-rules" like media queries, font-face and many more.

    Hope this gives some clarification. Thank you for all your concerns.

  • Profile Image
    earthdaysf
    Answered on March 02, 2013 at 09:49 PM

    That's awesome, except if understand this thread, a form did not display the same on different browsers for the OP. 

  • Profile Image
    EltonCris
    Answered on March 02, 2013 at 10:00 PM

    @earthdaysf

    Thanks.

    To my understanding, the form displays properly except that it has some cut-off issues probably because of the div container where the form is embedded. The form column wrapping has been modified (as per suggest by my colleague Sirdhart) so it fits exactly on the user's website if I am not mistaken. ;)