-
AgilityAssoc.CanadaAsked on November 12, 2018 at 11:48 AM
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
-
Kevin Support Team LeadReplied on November 12, 2018 at 1:45 PM
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.
-
AgilityAssoc.CanadaReplied on November 12, 2018 at 5:19 PM
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
-
John_BensonReplied on November 12, 2018 at 8:54 PM
Thank you for updating us.
Please ignore this message if the issue is now resolved.
If you need further help, please let us know.