How to shrink some input fields?

  • Profile Image
    tiendaveggie
    Asked on December 30, 2017 at 01:29 PM

    I have this in my css, works in your sim, not in my mobile (it expands again)


    .form-input {

        width : 40px;

    }


    What can be the problem?

    Thanks

  • Profile Image
    Marvih
    Answered on December 30, 2017 at 04:30 PM

    Please try adding this custom CSS code into your form.

    @media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape)  {

    .form-line, .form-line.form-line-column {


    width: 50% !important;

    }

    }

    You can adjust the "width" depending on what you like.

    Here is the form I cloned from you.
    https://form.jotform.com/73635914255966


    Thank you.

  • Profile Image
    tiendaveggie
    Answered on December 30, 2017 at 05:09 PM

    Great! I'll continue with yours then, thanks!

  • Profile Image
    tiendaveggie
    Answered on December 30, 2017 at 06:48 PM

    Marvih, in your copy, at the end, "contacto", "local" "persona" apear only in one column to the left. I'd like it to take the whole space. How can you do that?


    Thanks

  • Profile Image
    Kevin_G
    Answered on December 30, 2017 at 11:22 PM

    The fields you're referring to are currently displaying like this: 

    15146939601.png

    You may change them to this:

    15146939982.png

    And you will only need to inject this code: 

    @media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape)  {


    [data-type=control_fullname] .form-sub-label-container {

        width: 100%;

    }

    }

    Another possibility is to change the fields like this: 

    15146940773.png

    And you will only need to inject this code to achieve it: 

    @media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape)  {

    li#id_23 {

        width: 100% !important;

    }

    }

    This guide will help you injecting the code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    I hope this helps. 

  • Profile Image
    tiendaveggie
    Answered on December 31, 2017 at 07:30 AM

    Thanks Kevin_G, I think I understand a bit more now how this works now, great!!


    How can I control the distance from one field to the other one (vertically)

    How can I change the color of a field i select when i click (ex i select number in the dropdown menu and it gets yellow)


    Thanks!!

  • Profile Image
    TREVON
    Answered on December 31, 2017 at 09:02 AM

    To control the distance between each field vertically Kindly inject the CSS code below to your form. You can adjust the bottom or top distances according to your need.

    .form-line {
        padding-top: 20px;
        padding-bottom: 36px;
    }

    To change the background when you highlight a dropdown, kindly inject the following code to your form. Kindly take note of the section in the code highlighted in red colour which is where you will replace with a colour code of your choice.

    .form-line.form-line-active {
      -webkit-transition-property: all;
      -moz-transition-property: all;
      -ms-transition-property: all;
      -o-transition-property: all;
      transition-property: all;
      -webkit-transition-duration: 0.3s;
      -moz-transition-duration: 0.3s;
      -ms-transition-duration: 0.3s;
      -o-transition-duration: 0.3s;
      transition-duration: 0.3s;
      -webkit-transition-timing-function: ease;
      -moz-transition-timing-function: ease;
      -ms-transition-timing-function: ease;
      -o-transition-timing-function: ease;
      transition-timing-function: ease;
      background-color: #ffffe0;
    }

    To inject CSS to your form kindly follow the guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes



  • Profile Image
    tiendaveggie
    Answered on December 31, 2017 at 09:29 AM

    Thanks Trevon!


    To control the distance vertically i can only put more distance with your formula, i need to make them closer...


  • Profile Image
    TREVON
    Answered on December 31, 2017 at 10:03 AM

    Kindly replace the CSS code:

    .form-line {
        padding-top: 20px;
        padding-bottom: 36px;
    }

    withe the code below:

    .form-line {
        padding-top: 0px;
        padding-bottom: 0px;
        margin-bottom: -10px;
    }
    .form-collapse-mid {
        text-shadow: 0px 2px 0px #fff;
        float: left;
        font-size: 18px;
        margin-top: 16px;
        margin-right: 4px;
        margin-bottom: 16px;
        margin-left: 4px;
    }

    Kindly let us know if the code reduces the vertical space as intended.