How can I duplicate fields and keep my forms layout?

  • Profile Image
    henryclarke10
    Asked on October 27, 2017 at 03:29 PM

    Hello,

    I have a form which has custom css for the 2 fields at the top (Name of Org. and Org. Size.) I duplicated those fields, copied the css, changed the form-col numbers to the new fields and saved, but the css isn't being applied to the new fields. 

    Any help would be greatly appreciated!

  • Profile Image
    Kevin_G
    Answered on October 27, 2017 at 05:01 PM

    I cloned your form and noticed the issue you're reporting, after further inspecting it I can see it happens since you're using specific selectors to apply the CSS code, example: 

    .form-col-1, .form-col-2 {

      width: 50%;

    }

    When you shrink the fields they will have automatically added the following class ".form-line-column" which will allow you to handle the general fields instead of handling only some of them. 

    I modified your code and ended up with this one that worked on my end, even when you are duplicating the fields: 

    @import url('https://shots.jotform.com/elton/genericTheme.css');

    .form-submit-button {

        background : #1838a3 !important;

        color : #fff;

        -webkit-border-radius : 5px;

        -moz-border-radius : 5px;

        border-radius : 5px;

        border : none;

        box-shadow: none;

        height : 60px;

        width : 100%;

        font-size : 20px !important;

        font-weight : bold;

        text-shadow : 0 0px #000 !important;

    }

    .form-line-column {

      width: 50%;

    }

    @media (min-width: 768px) {

    .form-line-column {

      max-width: 47% !important;

      margin-right: 3%;

    }

    }

    input, select, textarea {

      padding: 16px !important;

      background-color: #eee !important;

      color: #999 !important;

    }

    .form-line {

      padding-left: 0;

      padding-right: 0;

    }

    .form-all {

    border: none !important;

    box-shadow: none !important;

    }

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

      .form-line-column {

        margin-left: 0;

        margin-right: 0;

      }

    }

    ::-webkit-input-placeholder {

        font-size: 1em !important;

        color: #999;

    }

    :-moz-placeholder {

        font-size: 1em !important;

    }

    ::-moz-placeholder {

        font-size: 1em !important;

        color: #000;

    }

    :-ms-input-placeholder {

        font-size: 1em !important;

        color: #000;

    }

    .form-dropdown {

        font-size: 1em !important;

        color: #000;

    }

    .form-line:not(.form-line-column){

        padding-right: 3%;

    }

    Here is an example about how it will work: 

    15091380761.gif

    Please replace the current code you have with the one I provided and let us know how it goes.