Adjust vertical margin space based on radio button response.

Hi,

How can I automatically adjust the vertical margin based on the response to  radio button.

On form 61013950784960, my first question is a radio button, based on it's "YES" response, the space below it is occupied by text and two questions. If "NO" the space is left empty. Can I create a condition that adjusts the margin between #id_37 and #id_16.

Right now I have a lot of CSS code settings that adjust all the elements in between these two. It makes for strange responses at times.

My thought is if I could just open or close the space between the two I wouldn't need all these other settings.

I hope this is making some sense as I am not exactly sure how to describe what I am aiming at.    

This image might help.

Thank you, Best Robert

 

There is not a condition to add/remove spaces, padding or change CSS properties, please kindly review this document to get more information about our available conditions and how they work: https://www.jotform.com/help/57-Smart-Forms-Using-Conditional-Logic 

Now, note that when you're conditionally showing/hiding elements the space will be automatically removed, this means that the gap will not be there when the field is conditionally hidden. Upon reviewing your form I can see you're customized your form with a lot of CSS code, the issue seems to happen due to the way how you have positioned the elements. For example, if I remove all the CSS code from your form the form works like this: 

Now, I have customized your CSS code and got it working as expected, please replace all your code with this one: 

/* Injected CSS Code */

html {

    font-size : 100%;

    font-size : 16px;

}

body {

    font-size : 0.75em;

    font-size : 12px;

}

h1 {

    font-size : 2em;

    font-size : 24px;

}

.form-all {

    font-family : "Arial", sans-serif !IMPORTANT;

    border-width : 2px !important;

    border-style : outset !important;

    border-color : #c00 !important;

    border-radius : 12pt !important;

    -moz-box-sizing : border-box !important;

    -webkit-box-sizing : border-box !important;

    -webkit-box-shadow : 10px 10px 11px -1px #ccc!important;

    -moz-box-shadow : 10px 10px 11px -1px #ccc!important;

    box-shadow : 10px 10px 11px -1px #ccc!important;

    box-shadow : inset 0px 0px 30px #888 !important;

    box-shadow : inset 0px 0px 19px 0px #ABABAB,3px 4px 19px -1px #211F1F !important;

    -webkit-box-shadow : inset 0px 0px 19px 0px #ABABAB,3px 4px 19px -1px #211F1F !important;

    -moz-box-shadow : inset 0px 0px 19px 0px #ABABAB,3px 4px 19px -1px #211F1F !important;

    -o-box-shadow : inset 0px 0px 19px 0px #ABABAB,3px 4px 19px -1px #211F1F !important;

}

.form-header-group {

    border : none !important;

}

.form-textbox, .form-dropdown, .form-textarea {

    background : white !important;

    color : black !important;

    font-family : "Arial", sans-serif !IMPORTANT;

}

.form-required {

    font-size : 1.1em;

    font-weight : bold;

    color : yellow;

    margin : 1%;

    padding : 1%;

}

.form-button-error {

    color : yellow;

    font-weight : bold;

}

#header_24 {

    font-size : 2.5em;

    font-family : Arial, sans-serif !IMPORTANT;

    color : white !IMPORTANT;

    text-shadow : 1.5px 1.5px 4px #666;

    text-align : center;

    border : 0;

    background-color : transparent;

    margin-left : 8%;

    margin-right : 2%;

    margin-top : 1%;

    margin-bottom : 5%;

    max-width : 500px;

    width : 100%;

}

/* yes-no member */

#id_37 {

    margin-top : 0;

    margin-left : 11%;

    margin-bottom : 0.1%;

    left : 5em;

    max-width : 350px;

    width : 100%;

    padding : 0;

}

/* validate */

#id_49 {

        position: relative;

    max-width: 190px;

    width: 95%;

    margin-left: 2.5%;

    margin-right: 0;

    margin-top: 0;

    margin-bottom: -.2%;

    left: 245px;

    /* height: .08em; */

    top: -15px;

    left: -90px;

    z-index: 1;

}

#id_57 {

    width: 150px;

    top: -120px;

    margin-left: 360px;

    margin-bottom: -10.2%;

}

#input_57 {

    text-align : center;

}

#id_57 label.form-sub-label,

#id_57 label {

    width : 250px;

    font-size : 1.2em;

    color : yellow;

    margin : 1.2% 0;

}

/* Prov */

#input_15 {

    width : 40px !important;

}

/* Country */

#id_16 {

    position : relative;

    /*margin-top : 100px;*/

    z-index : 16;

}

#input_16 {

    width : 110px !important;

    height : 22px !important;

    font-size : 1em;

}

#input_15, #input_19, #input_20, #input_30, #input_23, #input_26 {

    text-align : center !important;

}

/* PC Code */

#input_19 {

    width : 75px !important;

}

#id-19 {

    margin-left : -9%;

    margin-right : 20%;

}

/* id-57 Email */

#cid_35, #cid_36 {

    margin-left : 2%;

    margin-right : 0%;

    margin-top : 0%;

    margin-bottom : 0%;

}

/* Tele / Cell */

#input_54_full, #input_55_full {

    width : 120px;

    text-align : center;

}

/* *** TEXT BOX FADING/COLORING *** */

#id_56 {

    position : relative;

    max-width : 330px;

    width : 100%;

    top : -10px;

    margin-left : .2%;

    margin-right : .1%;

    margin-top : 5%;

    margin-bottom : -55px;

    /*height : 20px;*/

    /*top : -145px;*/

    z-index : 1;

}

#text_56 {

    color : white;

    max-width : 220px;

    width : 100%;

    background-color : black;

    margin-left : 0%;

    margin-right : 19%;

    margin-top : -7%;

    margin-bottom : 6%;

    padding : 2pt;

    text-align : center;

    border-radius : 12pt;

    border : 3px yellow outset;

    -webkit-animation : fadeinout 4s linear forwards;

    animation : pulse 20s infinite;

}

/* end */

#id_37 {

    /*margin-bottom : 90px;*/

    margin-right : -10px;

}

#label_37 {

    font-size : 10pt;

}

#id_38 {

    margin-left : 15%;

    margin-right : 1%;

    margin-top : 0%;

    margin-bottom : 5%;

    max-width : 130px;

    width : 100%;

}

#input_38_donation {

    text-align : center;

    font-weight : bold;

    max-width : 50px;

    width : 100%;

}

/* BUTTONS */

#input_reset_33 {

    max-width : 142px !IMPORTANT;

    width : 100%;

    margin : 4% 1% !IMPORTANT;

    font-size : .9em !IMPORTANT;

    color : white !IMPORTANT;

}

#input_33, #input_print_33 {

    max-width : 142px !IMPORTANT;

    width : 100%;

    margin : 4% 1% !IMPORTANT;

    font-size : 1.2em !IMPORTANT;

    color : white !IMPORTANT;

}

@-webkit-keyframes fadeinout {

  0%,100% { opacity: 0; }

  50% { opacity: 1; }

}

@keyframes fadeinout {

  0%,100% { opacity: 0; }

  100% { opacity: 1; }

}

@keyframes pulse {

  10% {

    background-color: #000099;

  }

  20% {

    background-color: #990099;

  }

  30% {

    background-color: #D000FF;

  }

  40% {

    background-color: #9d0000;

  }

  50% {

    background-color: #0000FF;

  }

  60% {

    background-color: #5F0090;

  }

  70% {

    background-color: #9d0000;

  }

  100% {

    background-color: #0d0000;

  }

}

Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

Result: 

I hope this helps. 

Hello,

@Kevin, Well done... Works very well... just the way I want it to.

I see you comment out the height for id_56, margin settings and top settings. I was having difficulty with the elements shifting upwards and that was my work around... I wasn't real happy doing it and was sure there was a proper way. Now I see the way it should have been done.  

Many thanks, best regards, Robert

Thank you for updating us. 

Please ignore this message if the issue is now resolved. 

If you need further help, please let us know.