Extract the CSS portion of this form to get the desired responsiveness of the form

  • digichef
    Asked on December 5, 2014 at 7:26 PM

    This question is for Elton Cris.

    Hi Elton,

    This injected code displays perfectly in desktop and mobile (centered & no horizontal scrolling)
    EltonCris' Responsive "Contact Us" Template.

    http://form.jotform.us/form/43387469614163

    Is it possible to extract only the portion of this code to achieve centering & no horizontal scrolling only?

    Is it then possible to make edits edits in Forms Designer, color, insert image etc and then STILL have the above code be responsive, either before or after injecting EltonCris' code?

    Thanks
    Brian

  • Elton Support Team Lead
    Replied on December 6, 2014 at 3:05 AM

    Hello Brian :)

    Actually I have turned the mobile responsive CSS code into a widget so everyone can use it. http://widgets.jotform.com/widget/mobile_responsive. Just add it to your form and you're set. The form should become responsive.

    However if you need code specifics like the one on your example, try this. http://pastebin.com/raw.php?i=QHcTyj14. This one is style-less, I have removed all of the styles (colors, background and padding) retaining only the CSS for mobile responsive so you can further customize your form styles on the form designer. However, do take note that Form Designer has its own mobile styles, it may overwrite the responsive CSS code you injected to your form but there's nothing to worry since the form will continue to display perfectly on mobile when you enable "Form Responsive" on the Form Designer.

    Extract the CSS portion of this form to get the desired responsiveness of the form Image 1 Screenshot 20

    Hope this helps. Thanks.

  • digichef
    Replied on December 6, 2014 at 8:48 AM

    I understand and thanks for your help. 

    Number One is the best in Mobile & Desktop!

    (It looks like using the Responsive Widget is the best option.  I just need to know how to increase the height size of the fields) - Is your Widget editable?

    1) This look is what I want to apply to forms going forward:
    MOBILE (no horizontal scrolling, horizontal padding & centered, HEIGHT OF FIELDS are perfect)
    DESKTOP (form is at the TOP of browser)
    http://form.jotform.us/form/43206646769161

    2) This is using the "Responsive Widget" only:
    MOBILE (fields aren't high enough"
    http://form.jotform.us/form/43393188750159

    3) This is using your "Style-Less" code
    MOBILE (no horizontal scrolling but form fields aren't high enough)
    http://form.jotform.us/form/43393136324149

    4) This is using the "Make Responsive" check box in Form Designer
    Mobile (Scrolls horizontally)
    http://form.jotform.us/form/43393916541156

    Thanks again for your time!
    Brian

  • Elton Support Team Lead
    Replied on December 6, 2014 at 2:17 PM

    Great! Glad to hear one of the option works for you.

    Unfortunately the widget isn't editable but it's not a problem since you can also inject media query CSS directly on your form or on the form designer (CSS tab) if you want to add extra styles for mobile.

    You can use the following.

    @media only screen and (max-width:40em){

    /*Place the CSS code for mobile here e.g. height size of the fields by padding*/

    .form-textbox{padding:8px !important;}

    }

    If you have further questions or if you need clarifications, let us know.

    Thanks.

    P.S. Thanks for providing the demo forms by the way, we greatly appreciate it. :)

  • digichef
    Replied on December 6, 2014 at 4:45 PM

    I'm sorry, I'm being lame.

    This form displays properly. 
    (no horizontal scrolling, horizontal padding & centered, HEIGHT OF FIELDS are perfect)
    http://form.jotform.us/form/43206646769161

    Which portion of the code controls the height of the fields?
    I would like to add just that portion to your "style-less" code.  I just need to know specifically where to add it.

    Your "style-less" code:

    .form-textarea,
    .form-textbox,
    .form-dropdown{
    width:100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }
    .form-textarea:focus,
    .form-textbox:focus,
    .form-dropdown:focus{
    outline: 0  !important;
    }
    /*---------form border------------*/
    .form-all{
    margin-top: 3px;
    }/*---------fix yellow active background overlapping-------------*/
    .form-line {
    width:auto !important;
    }


    span.form-sub-label-container + span.form-sub-label-container {
    margin-right: 0;
    }
    .form-address-table select,
    .form-address-state,
    .form-address-table,
    .form-address-line,
    .form-address-table .form-sub-label-container {
    width: 100%;
    }
    .form-address-postal,
    .form-address-city{
    width: 99%;
    }
    .form-address-table {
    width: 100% !important;
    }
    .form-address-table td, .form-address-table th {
    padding-bottom: 10px;
    padding: 0 0 10px 0;
    }
    div span.form-sub-label-container + span.form-sub-label-container{
    width: 49%;
    }
    input[name$="[first]"], input[name$="[last]"]{
    width: 100%;
    }
    .form-sub-label-container {
    margin-right: 1px;
    width: 50%;
    }
    .form-label-left, .form-label-top {
    width: 100% !important;
    }
    .form-input {width: 100% !important;}
    @media (max-width: 480px) {
        .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;}
        .form-buttons-wrapper{margin-left:0 !important;}
        .form-all{width: 98%;}
        .form-sub-label-container {width: 100%;display:block;}}
    .jotform-form{
    padding-bottom:10px;
    }

  • digichef
    Replied on December 6, 2014 at 4:58 PM

    EltonCris,

    I think I may have figured it out, doh!

    I added this at the beginning of your "style-less" code.

    @media only screen and (max-width:40em){

    /*Place the CSS code for mobile here e.g. height size of the fields by padding*/

    .form-textbox{padding:8px !important;}

    }

    Now the fields are larger on mobile!

    http://form.jotform.us/form/43396285005153

  • val
    Replied on December 7, 2014 at 1:47 AM

    Hi,

    Great! you sorted out the issues! :)

    If you have any question please let us know.

    Thanks!